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
