Dzie? Dobry :)
Bawi? si? pewnym panelem nawigacyjnym menu CSS i próbuj? ten panel przekszta?ci?. :)
Najpierw si? spróbuje zapyta? czy to by?oby mo?liwe wykona? a o to rysunek tego co chc? stworzy? :
http://tinypic.co...
A o to kod plików a dla u?atwienia podam nazwy ze ?cie?k? :
1). css/dropdown/dropdown.css:
@charset "UTF-8";
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Kliknij i zaczekaj na załadowanie kodu ...
2). css/dropdown/dropdown.vertical.css:
@charset "UTF-8";
@import "dropdown.css";
ul.dropdown-vertical {
width: 200px;
}
ul.dropdown-vertical ul {
top: 1px;
left: 99%;
}
ul.dropdown-vertical li {
float: none;
}
Kliknij i zaczekaj na załadowanie kodu ...
3). css/dropdown/dropdown.vertical.rtl.css:
@charset "UTF-8";
@import "dropdown.vertical.css";
ul.dropdown-vertical-rtl {
float: right;
}
ul.dropdown-vertical-rtl ul,
ul.dropdown-horizontal > li.dropdown-vertical-rtl ul ul {
left: auto !important;
right: 99%;
}
ul.dropdown-horizontal li.dropdown-vertical-rtl ul {
left: auto;
right: 0;
}
ul.dropdown-vertical-rtl li,
li.dropdown-vertical-rtl li {
text-align: right;
}
Kliknij i zaczekaj na załadowanie kodu ...
4). css/dropdown/dropdown.upward.css:
@charset "UTF-8";
@import "dropdown.css";
ul.dropdown-upward ul {
top: auto !important;
bottom: 100%;
}
ul.dropdown-upward ul ul {
bottom: 1px;
}
Kliknij i zaczekaj na załadowanie kodu ...
5). css/dropdown/themes/default/default.css:
@charset "UTF-8";
/* -- Base drop-down styling -- */
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover,
ul.dropdown li.on {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(../../../../images/default/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(../../../../images/default/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(../../../../images/default/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(../../../../images/default/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir,
ul.dropdown-horizontal > li.dropdown-vertical-rtl ul *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(../../../../images/default/nav-arrow-left.png);
background-position: 2px 50%;
}
Kliknij i zaczekaj na załadowanie kodu ...
6). css/dropdown/themes/default/default.ultimate.css :
@charset "UTF-8";
@import "default.css";
/* -- Base style extension -- */
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 7px 10px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
border: none;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 8px;
}
/* -- Base style reinitiate: post-override activities -- */
/* -- Custom styles -- */
ul.dropdown li.hover,
ul.dropdown li:hover {
background: url(../../../../images/default/grad2.png) 0 100% repeat-x;
color: #000;
}
ul.dropdown li a:active {
background: url(../../../../images/default/grad1.png) repeat-x;
}
ul.dropdown ul {
margin-top: 0;
}
/* -- Mixed -- */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
}
/* -- Drop-down open -- */
ul.dropdown li.on > *.dir,
ul.dropdown li:hover > *.dir,
ul.dropdown-horizontal li.dropdown-vertical-rtl li:hover > *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ffa500 #d9d9d9 #d9d9d9;
background-color: #fff;
color: #000;
}
ul.dropdown ul li.on > *.dir,
ul.dropdown-vertical li.on > *.dir,
ul.dropdown ul li:hover > *.dir,
ul.dropdown-vertical li:hover > *.dir {
padding-left: 15px;
border-top-color: #fff;
border-left: solid 1px #ffa500;
}
ul.dropdown-vertical.dropdown-vertical-rtl li.on > *.dir,
ul.dropdown-vertical.dropdown-vertical-rtl li:hover > *.dir,
ul.dropdown-horizontal li.dropdown-vertical-rtl li:hover > *.dir {
padding-right: 15px;
border-right-color: #ffa500;
border-top-color: #fff;
border-left: none;
background-position: 2px 50%;
}
ul.dropdown-upward li.on > *.dir,
ul.dropdown-upward li:hover > *.dir {
border-top-color: #fff;
border-bottom-color: #ffa500;
}
ul.dropdown-upward ul li.on > *.dir,
ul.dropdown-upward ul li:hover > *.dir {
border-bottom-color: #d9d9d9;
}
Kliknij i zaczekaj na załadowanie kodu ...
Dzi?ki tym dwóm plikom 'css/dropdown/themes/default/default.ultimate.css' , 'css/dropdown/dropdown.vertical.rtl.css' osi?gamy nast?puj?cy wygl?d :
http://tinypic.co...
Bardzo ?adnie to wygl?da. :) Zacz??em edytowa? , bo zabrak?o Mi miejsca na te rozsuwane s?upki czy kolumny i Chcia?bym ?eby to Menu rozsuwa?o si? nast?puj?co jak na obrazku :
http://tinypic.co...
Do Panela wklejam nast?puj?cy kod :
<link href='css/dropdown/dropdown.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/dropdown/dropdown.vertical.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/dropdown/dropdown.vertical.rtl.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/dropdown/dropdown.upward.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/dropdown/themes/default/default.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/dropdown/themes/default/default.ultimate.css' media='screen' rel='stylesheet' type='text/css' />
</head>
<body>
<h1> ---------FIAT 126p--------- </h1>
<ul id='nav' class='dropdown dropdown-horizontal dropdown-upward'>
<li class='dir'>Wst?p
<ul>
<li><a href='./'>Ogólne o aucie</a></li>
<li><a href='./'>O Mnie</a></li>
</ul>
</li>
<li class='dir'>Newsy
<ul>
<li><a href='./'>Wiadomo?ci z zagranicy</a></li>
<li><a href='./'>Wiadomo?ci z kraju</a></li>
</ul>
</li>
<li class='dir'>Galeria
<ul>
<li><a href='./'>Zdj?cia po tuningu</a></li>
<li><a href='./'>Zdj?cia w pierwotnym stanie</a></li>
</ul>
</li>
<li class='dir'>Kalendarium
<ul>
<li><a href='./'>Historia Fiata</a></li>
<li><a href='./'>Historia Fiata 126p</a></li>
</ul>
</li>
<li class='dir'>Charakterystyka
<ul>
<li><a href='./'>Porównanie aut</a></li>
<li><a href='./'>Ogólna</a></li>
</ul>
</li>
<li class='dir'>Modele
<ul>
<li class='dir'><a href='./'>Wybrane Modele Fiata</a>
<ul>
<li><a href='./'>Modele 1000</a></li>
<li><a href='./'>Modele 700</a></li>
<li><a href='./'>Modele 650</a></li>
<li><a href='./'>Modele 600</a></li>
<li><a href='./'>Modele 500</a></li>
</ul>
</li>
<li><a href='./'>Modele Prototypowe</a></li>
<li><a href='./'>Modele Fiata 126p</a></li>
</ul>
</li>
<li class='dropdown-vertical-rtl'><a href='./' class='dir'>Naprawa</a>
<ul>
<li class='dir'><a href='./'>Uzupelnienie</a>
<li class='dir'><a href='./'>Naprawa Standard Komfort FL I1 I2</a>
<ul>
<li class='dir'><a href='./'>Nadwozie</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Wyposa?enie wn?trza i wyk?adziny</a></li>
<li><a href='./'>Siedzenie tylne</a></li>
<li><a href='./'>Siedzenie przednie</a></li>
<li><a href='./'>Zderzak tylny</a></li>
<li><a href='./'>Zderzak przedni</a></li>
<li><a href='./'>Akcesoria zewn?trzne</a></li>
<li><a href='./'>Pokrywa baga?nika</a></li>
<li class='dir'><a href='./'>Szyby - przednia , tylnia i boczne sta?e</a>
<ul>
<li><a href='./'>Szyby boczne tylko odchylane</a></li>
</ul>
</li>
<li><a href='./'>Drzwi</a></li>
<li><a href='./'>Sprawdzanie i wymiary</a></li>
<li><a href='./'>Cz??ci zewn?trzne</a></li>
<li><a href='./'>Cz??ci wewn?trzne</a></li>
<li><a href='./'>Cz??ci przednie</a></li>
<li><a href='./'>Pod?oga</a></li>
<li><a href='./'>Tablica rozdzielcza i osprz?t</a></li>
<li><a href='./'>Pokrywa komory silnika</a></li>
<li><a href='./'>Charakterystyka</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Instalacja elektryczna</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Urz?dzenia sterowania i kontroli</a></li>
<li><a href='./'>Urz?dzenia elektryczne</a></li>
<li><a href='./'>O?wietlenie zew?trzne i wewn?trzne</a></li>
<li><a href='./'>Obwód ?adowania</a></li>
<li><a href='./'>Uk?ad rozruchu</a></li>
<li><a href='./'>Uk?ad zap?onowy</a></li>
<li><a href='./'>Schematy</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Ogrzewanie i wentylacja</a>
<ul>
<li><a href='./'>Spryskiwacz szyby</a></li>
<li><a href='./'>Urz?dzenia ogrzewania i wentylacji</a></li>
<li><a href='./'>Ogrzewanie i wentylacja</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Zawieszenie i ko?a</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Ko?a</a></li>
<li><a href='./'>Zwrotnica</a></li>
<li><a href='./'>Amortyzatory</a></li>
<li><a href='./'>Zespo?y zawieszenia kó? jezdnych</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Uk?ad kierowniczy</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Dr??ki kierownicze</a></li>
<li><a href='./'>Przek?adnia kierownicza</a></li>
<li><a href='./'>Uk?ad kierowniczy</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Hamulce</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Sterowanie hamulcem r?cznym</a></li>
<li><a href='./'>Hamulce kó? przednich i tylnich</a></li>
<li><a href='./'>Uk?ad hamulcowy hydrauliczny</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Skrzynka biegów i przek?adnia g?ówna</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Przek??dnia g?ówna i mechanizm ró?nicowy</a></li>
<li><a href='./'>Pó?osie nap?dowe</a></li>
<li><a href='./'>Zewn?trzne sterowanie skrzynk? biegów</a></li>
<li><a href='./'>Skrzynka biegów</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>sprz?g?o</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Dane kontrolne i regulacyjne</a></li>
<li><a href='./'>sterowanie wy??czaniem sprz?g?a</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>silnik</a>
<ul>
<li><a href='./'>Narz?dzia specjalne do obs?ugi i naprawy</a></li>
<li><a href='./'>Wentylator - nap?d wentylatora</a></li>
<li><a href='./'>Os?ony uk?adu ch?odzenia</a></li>
<li><a href='./'>Smarowanie silnika</a></li>
<li><a href='./'>Ga?nik i filtr powietrza</a></li>
<li><a href='./'>Pompa paliwowa</a></li>
<li><a href='./'>Nap?d rozrz?du</a></li>
<li><a href='./'>T?oki i korbowody</a></li>
<li><a href='./'>Wa? korbowy i ko?o zamachowe</a></li>
<li><a href='./'>Miska olejowa i pokrywa rozrz?du</a></li>
<li><a href='./'>Korpus silnika i g?owica cylindrów</a></li>
<li><a href='./'>Zawieszenie zespo?u nap?dowego</a></li>
<li><a href='./'>Charakterystyki i dane techniczne</a></li>
</ul>
</li>
<li class='dir'><a href='./'>dane ogólnie</a>
<ul>
<li><a href='./'>Dane Ogólne</a></li>
</ul>
</li>
</ul>
</li>
<li><span class='dir'>Ogólne naprawy Fiata 126p</span>
<ul>
<li class='dir'><a href='./'>Zeszyt Napraw nr. 5</a>
<ul>
<li><a href='./'>Wymiana wa?ka rozrz?du</a></li>
<li><a href='./'>Wymiana przewodów hamulcowych</a></li>
<li><a href='./'>Naprawa pompy paliwa</a></li>
<li><a href='./'>Naprawa ga?nika</a></li>
<li><a href='./'>Naprawa przek?adni kierowniczej</a></li>
<li><a href='./'>Wymiana panewek wa?u korbowego</a></li>
<li><a href='./'>Wymiana spr??yn ?rubowych zawieszenia</a></li>
<li><a href='./'>Wymiana synchronizatorów skrzynki przek?adniowej</a></li>
<li><a href='./'>Naprawa pompy hamulcowej</a></li>
<li><a href='./'>Regulacja skoku ja?owego [cenzura]u sprz?g?a</a></li>
<li><a href='./'>Diagnostyka uszkodze? i regulacja przek?adni kierowniczej</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Zeszyt Napraw nr. 4</a>
<ul>
<li><a href='./'>Wymiana ?o?ysk skrzynki przek?adniowej</a></li>
<li><a href='./'>Wymiana ?o?ysk kó? tylnych</a></li>
<li><a href='./'>Naprawa silnika wycieraczki</a></li>
<li><a href='./'>Sprawdzenie dzia?ania regulatora pr?dnicy</a></li>
<li><a href='./'>Wymiana przegubu d?wigni zmiany biegów</a></li>
<li><a href='./'>Wymiana ci?gna (linki) sprz?g?a</a></li>
<li><a href='./'>Wymiana zaworów i uszczelnienie prowadnic zaworów</a></li>
<li><a href='./'>Naprawa wy??cznika zap?onu</a></li>
<li><a href='./'>Wymiana ?o?yska wyciskowego i tarczy dociskowej sprz?g?a</a></li>
<li><a href='./'>Sprawdzanie i regulacja luzu ?o?ysk kó? tylnych</a></li>
<li><a href='./'>Sprawdzanie, regulacja naci?gu i wymiana paska klinowego</a></li>
</ul>
</li>
<li><span class='dir'>Zeszyt Napraw nr. 3</span>
<ul>
<li><a href='./' class='dir'>Naprawa pr?dnicy</a></li>
<li class='dropdown-vertical-rtl'><a href='./' class='dir'>Naprawa rozrusznika</a>
<li class='dropdown-vertical-rtl'><a href='./' class='dir'>Contact Us</a>
<ul>
<li><a href='./' class='dir'>Naprawa pr?dnicy</a></li>
<li><a href='./'>Wymiana ?o?ysk kó? przednich</a></li>
<li><a href='./'>Wymiana amortyzatorów przednich</a></li>
<li><a href='./'>Wymiana oleju w skrzynce przek?adniowej</a></li>
</ul>
</li>
<li><a href='./'>Wymiana szcz?k hamulcowych kó? tylnych</a></li>
<li><a href='./'>Wymiana ko?cówek dr??ków kierowniczych</a></li>
<li><a href='./'>Wymiana t?umika wydechu</a></li>
<li><a href='./'>Sprawdzanie i wymiana termostatu</a></li>
<li><a href='./'>Wymiana w??cznika ?wiate? hamowania STOP</a></li>
<li><a href='./'>Wymiana tarczy sprz?g?a</a></li>
<li><a href='./'>Wymiana ci?gna (linki) hamulca awaryjnego</a></li>
<li><a href='./'>Wymiana t?oczków cylinderków hamulcowych</a></li>
<li><a href='./'>Regulacja hamulca awaryjnego (r?cznego)</a></li>
<li><a href='./'>Wymiana ?arówek oraz ustawianie ?wiate? g?ównych (reflektorów)</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Zeszyt Napraw nr. 2</a>
<ul>
<li><a href='./'>Wymiana oleju w silniku oraz za?o?enie za?lepki wa?u korbowego</a></li>
<li><a href='./'>Wymiana ci?gna urz?dzenia rozruchowego (ssania)</a></li>
<li><a href='./'>Wymiana ci?gna przepustnicy (gazu)</a></li>
<li><a href='./'>Wymiana przegubów elastycznych pó?osi</a></li>
<li><a href='./'>Wymiana amortyzatorów tylnich</a></li>
<li><a href='./'>Wymiana ci?gna rozrusznika</a></li>
<li><a href='./'>Wymiana sworzni zwrotnic</a></li>
<li><a href='./'>Sprawdzenie czujnika poziomu paliwa</a></li>
<li><a href='./'>Wymiana ??cznika dr??ka zmiany biegów</a></li>
<li><a href='./'>Wymiana pier?cieni uszczelniaj?cych wa? korbowy</a></li>
<li><a href='./'>Wymiana opon</a></li>
<li><a href='./'>Wymiana uszczelek uk?adu hamulcowego</a></li>
<li><a href='./'>Regulacja luzu ?o?ysk kó? przednich</a></li>
<li><a href='./'>Demonta? , oczyszczenie i regulacja ga?nika</a></li>
</ul>
</li>
<li class='dir'><a href='./'>Zeszyt Napraw nr. 1</a>
<ul>
<li><a href='./'>Smarowanie sworzni zwrotnic</a></li>
<li><a href='./'>Wymiana ?a?cucha i kó? z?batych nap?du rozrz?du</a></li>
<li><a href='./'>Naprawa resoru</a></li>
<li><a href='./'>Naprawa zawieszenia skrzyni biegów</a></li>
<li><a href='./'>Uszczelnienie pó?osi</a></li>
<li><a href='./'>Uszczelnienie skrzyni biegów</a></li>
<li><a href='./'>Naprawa sygna?u dzwi?kowego</a></li>
<li><a href='./'>Naprawa szcz?k hamulcowych kó? przednich</a></li>
<li><a href='./'>Naprawa zawieszenia silnika</a></li>
<li><a href='./'>Wymiana uszczelek os?on dr??ków popychaczy</a></li>
<li><a href='./'>Regulacja Zap?onu</a></li>
<li><a href='./'>Regulacja luzów zaworów</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class='dir'>Contact Us
<li class='dir'><a href='./'>Enquiry Form
<li class='dir'><a href='./'>Map & Driving Directions
<li class='dir'><a href='./'>Your Feedback
</ul>
</li>
</ul>
Kliknij i zaczekaj na załadowanie kodu ...
Dok?adam ikonki jako za?aczniki to tematu je?li by Kto? Chcia? odwzorowa? ca?y uk?ad panela :)
Pisz? i pisz? nie wiem co jeszcze dopisa? by?bym wdzi?czny je?li znalaz?by si? Kto? Kto pomo?e przy tej edycji . :-)
kolejny raz edytuje i si? domy?lam , ?e zapewne powinienem umie?ci? to w propozycjach :(. Prosz? tego ?le nie traktowa? i je?li istnieje mo?liwo?? to poprostu przenie?? :-)
Z góry Wielkie Dzi?kuj? :-)
ddurin2 dodał/a następującą grafiki:
Edytowane przez ddurin2 dnia 20.02.2013 11:53:00
|
Rozwiń Kod źródłowy CSS
kto? ch?tny zrobi? z tego gotowego moda? 
v7.02.03
