31 maja 2016

Wysuwane górne menu


Dziś instrukcja na wysuwane menu przewijające się razem ze stroną.

1. Wchodzimy w kod HTML i szukamy <header> zaraz pod nim wklejamy kod:

<style>
/* Some stylesheet reset */
.fin, .fin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}
/* Wygląd główny */
.fin {
    /* Marginesy i obramowanie */
    display: block;
margin-left: 0;
    position: fixed; top center; z-index: 999999;
    height: 45px;     /* wysokość */
    width: 100%; /* Zmień to, jeśli chcesz, żeby menu było szersze lub usuń całkowicie, jeśli chcesz, aby długość menu przybrała wartość &quot;domyślną&quot; (żeby menu było tak długie, jak pozwala na to zawartość */
    border-radius: 0px;     /* Wpisz większą wartość, jeżeli chcesz mieć zaokrąglone rogi */
    border: none;     /* kolor i grubość zwykłego obramowania */
    /* Tło oraz efekty podświetlenia linku */
    background: #ccc; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */
    background: -webkit-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Chrome i Safari */
    background: -moz-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Firefoxa */
    background: -o-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Opery */
    background: -ms-linear-gradient(bottom, #ccc, #ccc); /* Tło dla IE10 */
    box-shadow: inset 0 0px 0 ;     /* Cień menu */
}
.fin&gt;li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}
/* Główne linki */
.fin&gt;li&gt;a {
    /* Layout */
    display: block;
    padding: 13px 29px;
    /* Styl napisów */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    text-shadow: none;
    /* Efekty */
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
/* Stan linków głównych po najechaniu na nie kursorem */
.fin&gt;li&gt;a:hover, .fin&gt;li:hover&gt;a {
    background: #000;  
    background: rgba(255, 255, 255, .6);
    color: #000;
    text-shadow: 2px 2px 2px #ffd800;

}
.fin&gt;li:first-child&gt;a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.fin&gt;.dropdown&gt;a {
    padding-right: 26px;
}


.fin ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .1);
}
/* Level 1 podmenu */
.fin&gt;li&gt;ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #fff;
    top: 34px;
}
/* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
.fin&gt;li:hover&gt;ul {
    left: -1px;
}
/* Level 2+ podmenu */
.fin ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}
/* Sprawianie, że lvl 2+ menu wysuną się po najechaniu kursorem */
.fin ul&gt;li:hover&gt;ul {
    left: 120px;
    top: 1px;
}
/* Zawartość linków z podmenu */
.fin ul li {
    position: relative;
    display: block;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    /* Tworzenie efektu wysunięcia. Lista elementów, która się wysunie, ma 0 wysokości. Pojawi się dopiero wtedy, kiedy najedziemy kursorem w odpowiednie miejsce */
    height: 0px;
    -webkit-transition: height .4s;     /* Szybkość wysunięcia dla poszczególnych przeglądarek */
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
}
/* Wysunięta lista linków */
.fin li:hover&gt;ul&gt;li {
    height: 35px;
}
.fin ul li:hover&gt;ul&gt;li:first-child {
    height: 35px;
}
/* Linki podmenu */
.fin ul li a {
    /* Styl */
    display: block;
    width: 200px;     /* Jeśli w podmenu napiszemy zbyt długi wyraz i nam go ucina, zwiększamy wartość szerokości */
    padding: 10px;     /* Odstęp od brzegów wysuniętej listy - od wszystkich krawędzi: prawej, lewej, górnej, dolnej */
    border-bottom: none;
    /* Styl napisów */
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 1px #ffd800;
    font-family:  Arial, sans-serif;
    text-decoration: none;

    /* Efekty tła */
    background: #000;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -ms-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s;
}
/* Stan napisów, kiedy najedziemy kursorem na linki */
.fin ul li&gt;a:hover, .fin ul li:hover&gt;a {
    background: #e9e9e9;
    color: #000; font-weight: 600;
}
.fin ul ul&gt;li:first-child&gt;a {
    border-top: 1px solid #fff;
}
.fin ul&gt;li:last-child&gt;a {
    border-bottom: 1px solid #fff;
}


.fin ul&gt;.dropdown:hover&gt;a::after, .fin ul&gt;.dropdown&gt;a:hover::after {
    border-color: #fff;
}
</style>
<ul class='fin'>
  <li><a href='#'>Strona główna</a></li>
    <li><a href='#'>Nazwa strony</a>
    <ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
        <li><a href='#'>Nazwa podstrony III</a></li>
        <li><a href='#'>Nazwa podstrony IV</a></li>
        <li><a href='#'>Nazwa podstrony V</a></li>

         
      </ul></li>
    <li><a href='#'>Nazwa strony II</a><ul>
<li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
      </ul></li>
    <li><a href='#'>Nazwa strony III</a>
<ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
<li><a href='#'>Nazwa podstrony III</a>
   

            </li>
      </ul></li>
<li><a href='#'>Nazwa strony IV</a></li>
<li><a href='#'>Nazwa strony V</a></li>
<li><a href='#'>Nazwa strony VI</a></li>
<li><a href='#'>Nazwa strony VII</a></li>
<li><a href='#'>Nazwa strony VIII</a></li>
    </ul>
2. Zmieniamy wszystko według własnego uznania i zapisujemy.

źródło: introwertyczka1

Brak komentarzy:

Prześlij komentarz