2015/02/10

Bordowe rozwijane menu pod nagłówkiem dla Bloggera

Demo

Umieszczanie kodu

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Szablon => Edytuj kod HTML szablonu.
3. Kliknij w okno edytora i wciśnij Ctrl + F.
4. W wyszukiwarkę wpisz:
</header>
5. Wciśnij Enter, by wyszukać znacznik.
6. Tuż nad wyszukanym znacznikiem wklej poniższy kod:

     <nav id='menu'>
<ul>
<li>
<a href='#'>
Start
</a>
</li>
<li>
<a href='#'>
Tutoriale
</a>
</li>
<li>
<a href='#'>
Szablony
</a>
<ul class='menus'>
<li>
<a href='#'>
Blogger
</a>
</li>
<li>
<a href='#'>
WordPress
</a>
</li>
<li>
<a href='#'>
Strony www
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Skrypty
</a>
</li>
<li>
<a href='#'>
Dodatki
</a>
<ul class='menus'>
<li>
<a href='#'>
Blogi
</a>
</li>
<li>
<a href='#'>
Fora
</a>
</li>
<li>
<a href='#'>
Strony
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Blokotek.pl
</a>
</li>
</ul>
</nav>

<style>
#menu {
background-color:#C27779;
color:#fff!important;
height:55px;
width:960px;
margin:0 auto 5px;
}

#menu ul,#menu li {
list-style:none;
margin:0 auto;
padding:0;
}

#menu ul {
height:45px;
width:1155px;
}

#menu li {
float:left;
display:inline;
position:relative;
border-right:1px solid rgba(255,255,255,0.22);
-webkit-transition:background .25s ease-in;
-moz-transition:background .25s ease-in;
-ms-transition:background .25s ease-in;
-o-transition:background .25s ease-in;
transition:background .25s ease-in;
font-family:Arial;
font-weight:400;
font-size:16px;
color:#fff;
}

#menu a {
display:block;
line-height:55px;
text-decoration:none;
color:#fff;
padding:0 25px;
}

#menu li a:hover {
color:#fff;
background:#E6B1A4;
}

#menu input {
display:none;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
margin:0;
padding:0;
}

#menu label {
font:bold 30px Arial;
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center;
}

#menu label span {
font-size:12px;
position:absolute;
left:35px;
}

#menu ul.menus {
height:auto;
overflow:hidden;
width:180px;
background:#E6B1A4;
position:absolute;
z-index:99;
display:none;
}

#menu ul.menus li {
display:block;
width:100%;
font:13px Arial;
text-transform:none;
text-shadow:none;
}

#menu ul.menus a {
color:#333;
}

#menu li:hover ul.menus {
display:block;
}

#menu a.prett {
padding:0 27px 0 14px;
}

#menu a.prett::after {
content:"";
width:0;
height:0;
position:absolute;
top:23px;
right:9px;
border-color:#FFF transparent transparent;
border-style:solid;
border-width:6px 5px;
}

#menu ul.menus a:hover {
background:#C27779;
color:#FFF;
}
</style>
7. # zaznaczone na zielono zamień na linki.
8. Zapisz szablon.

Dostosowywanie

color:#fff!important; /* kolor czcionki */
background-color:#C27779; /* kolor tła menu */
width:960px; /* szerokość menu */

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.