Mrs.B: ZYGZAKOWATE RUCHOME MENU NAD NAGŁÓWKIEM BLOGA

Jak wykonać takie zygzakowate menu?

Już Wam kochani piszę ;)

Najpierw w edycji szablonu, w kodziku szukacie tej części kodu:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Zmieniacie ją tak jak ja poniżej:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Zmieniacie ją tak jak ja poniżej: Zapisujecie szablon i przechodzicie do układu bloga.

Tam pojawi się Wam nad tytułem bloga dodatkowe miejsce...

Zostawiamy ten dodaj gadżet na później...

Przechodzimy teraz do Motywu bloga, następnie w zaawansowane,

a następnie w dodaj arkusz CSS i tam dodajemy kodzik z poniższej ramki.

Klikamy enter i zapisujemy szablon.

Następnie wchodzimy jeszcze raz w edytuj szablon i przed

]]></b:skin> wklejamy kodzik z poniższej ramki,

możemy zmienić kolory np. #bb577b

i zapisujemy nasz szablon...

/* Main level */
.menu {   
 margin: 50px auto;
 width: 800px;
 width: fit-content; 
}

.menu > li {
 background: #f3a4b2;
 float: left;
 position: relative;
 transform: skewX(25deg);
color: #fff;
}

.menu a {
 display: block;
 color: #fff;
 text-transform: uppercase;
 text-decoration: none;
 font-family: Arial, Helvetica;
 font-size: 14px;

}

.menu li:hover {
 background: #fedfdc;
}

.menu > li > a {
 transform: skewX(-25deg);
 padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
 position: absolute;
 width: 200px;
 left: 50%; margin-left: -100px;
 transform: skewX(-25deg);
 transform-origin: left top;
}

.submenu li {
 background-color: #bc587a;
 position: relative;
 overflow: hidden;  
}

.submenu > li > a {
 padding: 1em 2em;   
}

.submenu > li::after {
 content: '';
 position: absolute;
 top: -125%;
 height: 100%;
 width: 100%;   
 box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
}

/* Odd stuff */
.submenu > li:nth-child(odd){
 transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
 transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
 right: -50%;
 transform: skewX(-25deg) rotate(3deg);
}

/* Even stuff */
.submenu > li:nth-child(even){
 transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
 transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
 left: -50%;
 transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
 opacity: 0;
 visibility: hidden;   
}

.submenu li {
 transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
 opacity: 1;
 visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
 transform: skewX(25deg) translateX(15px);   
}

.menu > li:hover .submenu li:nth-child(odd){
 transform: skewX(-25deg) translateX(-15px);   
}

Następnie przechodzimy do układu naszego bloga i dodajemy

nowy gadżet HTML/JavaScript w miejscu zaraz nad nagłówkiem

(te miejsce, które powstało wcześniej) do naszego bloga.

A w niego wklejamy kod z poniższej ramki...

Zmieniacie tam linki i nazwy waszych stron...

z...

<li><a href="adres strony">nazwa strony</a></li>

na np...
(użyjcie własnych url i nazw)

<li><a href="https://b-mrs.blogspot.com/p/kontakt.html">Kontakt</a></li> itd

nagłówkiem Zapisujecie gadżet i cieszycie się wyjątkowym menu na Waszym blogu :D

Strony

piątek, 21 września 2018

ZYGZAKOWATE RUCHOME MENU NAD NAGŁÓWKIEM BLOGA

Brak komentarzy:

Prześlij komentarz