11# Rozwijane Menu

Cześć!

Tym razem stworzymy nawigacje, która może się przydać wszelkiego rodzaju katalogom, galeriom, czy blogom, na których rozbudowane menu jest koniecznością. Przyznam, że rozgryzienie tego wszystkiego zajęło mi trochę czasu i mam nadzieję, że efekt przypadnie Wam do gustu. Efekt, który uzyskamy prezentuje się następująco:

Strona Domowa

Link Zewnętrzny

Sekcja pierwsza Kliknij tu!

• Strona 1
• Strona 2
• Strona 3
• Strona 4

Sekcja druga Kliknij tu!

• Strona 1
• Strona 2
• Strona 3
• Strona 4
• Strona 5
• Strona 6
• Strona 7
• Strona 8

Sekcja trzecia Kliknij tu!

• Strona 1
• Strona 2
• Strona 3
• Strona 4
• Strona 5
• Strona 6

Dzisiejsze menu umieścimy w gadżecie HTML/Javascript.

W tym celu z panelu naszego bloga kierujemy się do Układu, a następnie w wybranym przez siebie miejscu dodajemy gadżet.

Wystarczy kliknąć na plusik w prawym, górnym rogu. :)

W polu tekstowym naszego gadżetu wklejamy następujący kod:

<div class="nawigacja">
<div class="link1"><a href="#">Strona Domowa</a></div>
<div class="link2"><a href="#">Link Zewnętrzny</a></div>
<div class="przycisk1">Sekcja pierwsza <span>Kliknij tu!</span></div>
<div class="przycisk2">Sekcja trzecia <span>Kliknij tu!</span></div>
<ul class="lista1">
<li><a href="#">Strona 1</a></li>
<li><a href="#">Strona 2</a></li>
<li><a href="#">Strona 3</a></li>
<li><a href="#/">Strona 4</a></li>
</ul>
<div class="przycisk2">Sekcja druga <span>Kliknij tu!</span></div>
<ul class="lista2">
<li><a href="#">Strona 1</a></li>
<li><a href="#">Strona 2</a></li>
<li><a href="#">Strona 3</a></li>
<li><a href="#">Strona 4</a></li>
<li><a href="#">Strona 5</a></li>
<li><a href="#">Strona 6</a></li>
<li><a href="#">Strona 7</a></li>
<li><a href="#">Strona 8</a></li>
</ul>
<ul class="lista2">
<li><a href="#">Strona 1</a></li>
<li><a href="#">Strona 2</a></li>
<li><a href="#">Strona 3</a></li>
<li><a href="#">Strona 4</a></li>
<li><a href="#">Strona 5</a></li>
<li><a href="#">Strona 6</a></li>
<li><a href="#">Strona 7</a></li>
<li><a href="#">Strona 8</a></li>
</ul>

Wszystkie # zastępujemy swoimi linkami. :)

Możemy rzecz jasna dowolnie modyfikować ilość sekcji, ich położenie, a także liczbę linków, które są w nich położone. Należy jednak pamiętać, by analogicznie edytować również kod jquery, który podam poniżej oraz CSS.

Teraz, w panelu naszego bloga kierujemy się do sekcji szablon > Edytuj kod HTML. Po kliknięciu na pole tekstowe z kodem wyszukujemy </head>, by tuż pod nim wkleić poniższy kod:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){
$(".lista1").hide();
$(".przycisk1").show();
$(".przycisk1").click(function(){
$(".lista1").slideToggle(700);
});
});
$(document).ready(function(){
$(".lista2").hide();
$(".przycisk2").show();
$(".przycisk2").click(function(){
$(".lista2").slideToggle(700);
});
});
$(document).ready(function(){
$(".lista3").hide();
$(".przycisk3").show();
$(".przycisk3").click(function(){
$(".lista3").slideToggle(700);
});
});
  </script>

Jeśli chcecie dodać kolejną sekcję w swoim menu wystarczy skopiować ten fragment:

 $(document).ready(function(){
$(".lista3").hide();
$(".przycisk3").show();
$(".przycisk3").click(function(){
$(".lista3").slideToggle(700);
});
});

I wkleić go tuż pod kodem podanym wyżej, zmieniając przy tym  .lista3 na .lista4 i .przycisk3 na .przycisk4 - w obydwu miejscach w kodzie. Jak już zapewne się domyślacie w tym wypadku należy również dodać sekcję w naszym gadżecie HTML/JavaScript, tak by prezentował się następująco.

<div class="przycisk4">Sekcja czwarta<span>Kliknij tu!</span></div>
<ul class="lista4">
<li><a href="#">Strona 1</a></li>
<li><a href="#">Strona 2</a></li>
<li><a href="#">Strona 3</a></li>
</ul>
</div>

 Teraz pozostało jedynie ozdobić nasze nowe menu. :) W tym celu w układzie naszego bloga wchodzimy w szablon > dostosuj > zaawansowane > dodaj arkusz CSS. W celu uzyskania powyższego efektu ja użyłam następujących kodów:

1. Zaczynamy od ogólnego stylu dla nawigacji.

.nawigacja
{
width:300px; /*szerokość całego gadżetu*/
}
.nawigacja a
{
text-decoration:none; /*usunięcie podkreślenia linków*/
}
.nawigacja li
{
list-style-type:none; /*usunięcie stylu listy (tych kółek po prawej)*/
}

Dodajemy styl przycisków i linków, pod którymi nie ma sekcji.

.link1 a,.link2 a,.przycisk1,.przycisk3,.przycisk2
{
font-family:Arial; /*czcionka na przyciskach*/
cursor:pointer; /*rodzaj kursora na przyciskach*/
font-size:11px; /*rozmar czcionki*/
text-transform:uppercase; /*zamienienie wszystkich liter na wielkie*/
overflow:hidden; /*nie zmieniamy*/
text-align:center; /*wyśrodkowanie tekstu*/
display:block; /*nie zmieniamy*/
padding:6px; /*odległość tekstu od ramki*/
transition:.5s; /*czas animacji*/
background:#2c2c2c; /*kolor tła*/
margin-top:2px; /*margines górny*/
}
.przycisk1,.przycisk2,.przycisk3
{
height:15px; /*wysokość przycisków*/
overflow:hidden; /*pozostawiamy bez zmian*/
}
/*poniżej kolory czcionki na poszczególnych przyciskach*/
.link1 a
{
color:#fff;
}
.link2 a
{
color:#fff;
}

.przycisk1
{
color:#fff;
}
.przycisk2
{
color:#fff;
}
.przycisk3
{
color:#fff;
}

Następnie dodajemy efekty, po najechaniu na link. Poniżej animacja wewnętrznego cienia na linkach, które nie mają pod sobą żadnej sekcji.

.link1 a:hover
{
box-shadow:inset -300px 0 0 #74b128;
transition:.5s
}
.link2 a:hover
{
box-shadow:inset 300px 0 0 #4a8f0d;
transition:.5s
}

Później dodajemy kod, dzięki któremu po najechaniu na link, zawierający sekcję z prawej lub z lewej wysunie się napis "kliknij mnie".

.przycisk1 span
{
transition:.5s; /*czas trwania animacji*/
transform:translateX(100%); /*przesunięcie gadżetu w prawo*/
font-family:Arial; /*czcionka*/
cursor:pointer; /*kursor*/
font-size:11px; /*wielkość czcionki*/
text-transform:uppercase; /*zmiana wszystkich liter na wielkie*/
overflow:hidden; /*nie zmieniamy*/
text-align:center; /*wyśrodkowanie tekstu*/
display:block; /*nie zmieniamy*/
padding:6px; /*odległość tekstu od ramki*/
background:#88bf3a; /*tło*/
margin-left:-10px; /*odległość od prawego boku*/
margin-right:-10px; /*odległość od prawego boku*/
color:#fff; /*kolor czcionki*/
margin-top:-21px /*przesunięcie gadżetu na górę*/
}
.przycisk2 span
{
transition:.5s; /*czas trwania animacji*/
transform:translateX(-100%); /*przesunięcie gadżetu w lewo*/
font-family:Arial; /*czcionka*/
cursor:pointer; /*kursor*/
font-size:11px; /*wielkość czcionki*/
text-transform:uppercase; /*zmiana wszystkich liter na wielkie*/
overflow:hidden; /*nie zmieniamy*/
text-align:center; /*wyśrodkowanie tekstu*/
display:block; /*nie zmieniamy*/
padding:6px; /*odległość tekstu od ramki*/
background:#4a8f0d; /*tło*/
margin-left:-10px; /*odległość od prawego boku*/
margin-right:-10px; /*odległość od prawego boku*/
color:#fff; /*kolor czcionki*/
margin-top:-21px /*przesunięcie gadżetu na górę*/
}
.przycisk3 span
{
        transition:.5s; /*czas trwania animacji*/
transform:translateX(-100%); /*przesunięcie gadżetu w prawo*/
font-family:Arial; /*czcionka*/
cursor:pointer; /*kursor*/
font-size:11px; /*wielkość czcionki*/
text-transform:uppercase; /*zmiana wszystkich liter na wielkie*/
overflow:hidden; /*nie zmieniamy*/
text-align:center; /*wyśrodkowanie tekstu*/
display:block; /*nie zmieniamy*/
padding:6px; /*odległość tekstu od ramki*/
background:#4a8f0d; /*tło*/
margin-left:-10px; /*odległość od prawego boku*/
margin-right:-10px; /*odległość od prawego boku*/
color:#fff; /*kolor czcionki*/
margin-top:-21px /*przesunięcie gadżetu na górę*/
}
/*przesunięcie spanu na środek i dodanie animacji na trzech przyciskach*/
.przycisk1:hover span
{
transform:translateX(0%);
transition:.5s
}
.przycisk2:hover span
{
transform:translateX(0%);
transition:.5s
}
.przycisk3:hover span
{
transform:translateX(0%);
transition:.5s
}

Na końcu dodajemy styl poszczególnych list.

.lista1,.lista2,.lista3
{
margin-top:5px; /*odległość list od przycisku*/
}
.lista1 li a
{
display:block;
background:#206700; /*kolor tła w pierwszej liście*/
text-align:center; /*wyśrodkowanie tekstu*/
color:#fff; /*kolor tekstu*/
font-family:Tahoma; /*czcionka*/
font-size:10px; /*rozmiar tekstu*/
text-transform:uppercase; /*wszystkie litery wielkie*/
padding:5px; *odległość tekstu od ramki*/
}
.lista2 li a
{
display:block;
background:#74b128; /*kolor tła w pierwszej liście*/
text-align:center; /*wyśrodkowanie tekstu*/
color:#fff; /*kolor tekstu*/
font-family:Tahoma; /*czcionka*/
font-size:10px; /*rozmiar tekstu*/
text-transform:uppercase; /*wszystkie litery wielkie*/
padding:5px; *odległość tekstu od ramki*/
}
.lista3 li a
{
display:block;
background:#4a8f0d; /*kolor tła na drugiej liście*/
text-align:center; /*wyśrodkowanie tekstu*/
color:#fff; /*kolor tekstu*/
font-family:Tahoma; /*czcionka*/
font-size:10px; /*rozmiar tekstu*/
text-transform:uppercase; /*wszystkie litery wielkie*/
padding:5px; *odległość tekstu od ramki*/
}

Jeśli macie ochotę jeszcze trochę się pobawić możecie oczywiście dodać animacje również do list. :)
Na dziś to wszystko ode mnie.
Nie zapomnijcie obserwować mojego bloga i skomentować notki! :)