Jak wstawić nowoczesne rozwijane górne menu na Bloggera?

przez - kwietnia 17, 2015


Zobacz demo na blogu

W tym poradniku postaram się opisać w najbardziej zrozumiały sposób, jak umieścić stylowe, nowoczesne, górne, rozwijane menu w szablonie na Bloggerze. Jest ono responsywne, co oznacza, że dostosowuje się do wyświetlaczy wszystkich urządzeń mobilnych.

Zaloguj się na swoje konto i przejdź do menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora i wciśnij kombinację klawiszy Ctrl+F. Używając wyszukiwarki znajdź:
</head>
Tuż nad znalezionym znacznikiem wklej kod:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

<script src='http://yourjavascript.com/21450361951/flat-menu.js' type='text/javascript'/>

Teraz wyszukaj:
]]></b:skin>
I tuż nad nim wklej kod:
/* Top menu
----------------------------------------------- */
nav {
display: block;
background: #374147;
margin-top: -15px;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 169px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

Tym razem znów wyszukaj znacznik:
</head>
I tuż pod nim wklej kod:
  <nav>
    <a class='responsive-menu' href='#' id='resp-menu'>
      <i class='fa fa-reorder'/>
      Menu
    </a>
    <ul class='menu'>
      <li>
        <a class='homer' href='#'>
          <i class='fa fa-home'/>
          START
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
           <a href='#'>
             Sub-Menu 3
           </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-user'/>
          O AUTORZE
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-camera'/>
          PORTFOLIO
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-bullhorn'/>
          BLOG
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-tags'/>
          KATEGORIE
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-envelope'/>
          KONTAKT
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-sitemap'/>
          MAPA BLOGA
        </a>
      </li>
    </ul>
  </nav>

W powyższym kodzie menu, # zamień na linki.
Kody ikon znajdziesz na stronie czcionki Font Awesome.
Bardzo trudno jest w prosty sposób opisać zagadnienia dotyczące kodów programowania, także powyższe instrukcje wykonuj powoli, patrząc na obrazki. Jeśli coś ci nie wychodzi - napisz w komentarzu, a postaram się pomóc.

Zobacz również

0 komentarzy