/ / / 2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript

2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript

2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript

2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript


Berikut ini kode 2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript. Yang satu topbar menu atau menu di atas header. Satunya lagi Main Menu yaitu menu utama di bawah header.

Kedua kode menu navigasi buat blogger yang responsive plus dropdown plus link media sosial ini tanpa javascript sehingga ringan, fast loading, tidak membebani loading blog, dan anti-error. Cocok ditempatkan di template blogger biasa maupun jenis template blog AMP.

KODE MENU TOP / TOPBAR MENU

CSS Top Menu Blogger
Simpan di atas kode ]]></b:skin>

 
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;max-width:950px;z-index:9999}

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

#menutop ul{height:45px}

#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;

font-weight:bold;}

#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}

#menutop ul li:hover a{color:#666;}

#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}

#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}

#menutop label span{font-size:13px;position:absolute;left:35px}

#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}

#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}

#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}

#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}

#menutop a.dutt{padding:0 27px 0 14px}

#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop ul.menux li a{background:#fff;color:#919392;}

#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook {padding:0 5px;}

#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}

#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}

#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}

#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,

#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:800px) {

#menutop li:hover > ul.menux{display:block;}

#menutop ul{border:none;border-bottom:1px solid #e9e9e9;}

#menutop{position:relative;border:none;border-bottom:1px solid #e9e9e9;z-index:9999}

#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}

#menutop ul.menux{width:100%;position:static;border:none}

#menutop li{display:block;float:none;width:auto;text-align:left}

#menutop li a{color:#666}

#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}

#menutop li:hover{background:#8493a0;color:#fff;}

#menutop a.dutt{font-weight: bold;}

#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}

#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}

#menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome;

font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;

display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}

#menutop input{z-index:4;}

#menutop input:checked + label{color:#fff;font-weight:700}

#menutop input:checked ~ ul{display:block}

#menutop ul li ul li a{width:100%;color:#666;}

#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux a{background:#fff;color:#666;}

#menutop ul.menux a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li{background:#fff;color:#666;}

#menutop ul.menux li:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li a{background:#fff;color:#666;}

#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

}

HTML MENU TOP
Simpan di bawah kode <body> atau di atas kode header blog kalian.

<nav id='menutop'>

<input type='checkbox'/>

<label/>

<ul>

<li><a href='/' title='Home'>Home</a></li>

<li><a href='/p/about.html'>About</a></li>

<li><a href='/p/kontak.html'>Kontak</a></li>

<li><a href='/p/sitemap.html'>Sitemap</a></li>

<li><a class='dutt' href='#'>Dropdown</a>

<ul class='menux'>

<li><a href='#'>Submenu 1</a></li>

<li><a href='#'>Submenu 2</a></li>

<li><a href='#'>Submenu 3</a></li>

</ul>

</li>

<li><a href='http://crethuseo.blogspot.com' target='_blank'>Crethuseo</a></li>

<!-- Menu Link Sosial Media -->

<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>

<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>

<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>

<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>

<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>

</ul>

</nav>

  <div class='clear'/>

MAIN MENU
Menu responsive dropdown di bawah header blog

CSS MAIN MENU
Copas di atas kode ]]></b:skin>

#menu-wrapper{background:#454545;height:40px;width:100%;position:relative;margin: 0 auto;max-width:950px;}

#menu1 {color:#fff;height:40px;z-index:999}

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

#menu1 ul{height:40px;background:#454545}

#menu1 li{float:left;display:inline;position:relative;font-size:15px;font-weight:bold;text-transform:uppercase}

#menu1 li a{background:#454545;color:#fff}

#menu1 a{display:block;line-height:40px;padding:0 14px;text-transform:uppercase;color:#fff;transition:all .2s ease-in-out;font-size:15px}

#menu1 li:hover > a{background:#48d;color:#fff}

#menu1 li a:hover{color:#fff}

#menu1 li:last-child a{border-right:none}

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

#menu1 label{font-family:'Oswald';font-size:30px;font-weight:400;text-transform:capitalize;display:none;width:35px;height:51px;line-height:51px;text-align:center}

#menu1 label span{font-size:13px;position:absolute;left:35px}

#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all .3s ease-in-out}

#menu1 li > ul.menus{transition:all .3s linear}

#menu1 li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation:fadeInUp .3s ease-in-out;-webkit-animation:fadeInUp .3s ease-in-out;animation:fadeInUp .3s ease-in-out;transition:all .3s linear}

#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all .3s linear}

#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#48d;color:#fff}

#menu1 li > a.ai::after{content:"";margin:0 auto;background:url(https://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png) no-repeat;width:10px;height:10px;line-height:40px;position:absolute;top:20px;right:10px;transition:all .3s linear}

#menu1 li:hover > a.ai::after{content:"";margin:0 auto;background:url(http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png) no-repeat;width:10px;height:10px;line-height:40px;position:absolute;top:20px;right:10px;transition:all .3s linear}

#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear}

#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear}

#menu1 ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none}

#menu1 ul.menus li:hover{width:100%}

#menu1 ul.menus li:last-child{border-bottom:none}

#menu1 ul.menus li:first-child a{border-top:none}

#menu1 ul.menus li:last-child a{border-bottom:none}

#menu1 ul.menus li:hover a{background:#322a3b;color:#fff}

#menu1 .homers a{background:#f35d5c;color:#fff;padding-top: 5px;height:35px;}

#menu1 .homers a:hover{background:#d95353;color:#fff}

#menu1 a#pull {display:none;}

@media screen and (max-width:800px) {

#menu1{position:relative;background:#454545;color:#fff}

#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none}

#menu1 ul.menus{width:100%;position:static}

#menu1 li{display:block;width:100%;text-align:left}

#menu1 a{border:none;background:#111;}

#menu1 li a{color:#fff;background:#3f354a;}

#menu1 li a:hover{background:#f35d5c;color:#fff}

#menu1 li:hover{background:#f35d5c;color:#fff}

#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff}

#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition:.3s linear}

#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none}

#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-left:none}

#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none}

#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none}

#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none}

#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none}

#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0}

#menu1 input:after,#menu1 label:after{content:"";background:url(http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png) no-repeat;width:30px;height:30px;display:inline-block;position:absolute;right:5px;top:10px}

#menu1 input{z-index:4}

#menu1 input:checked + label{color:#fff;font-weight:700}

#menu1 input:checked ~ ul{display:block}

#menu1 .homers a{background:transparent;color:#fff}

#menu1 .homers a:hover{background:#f35d5c;color:#fff}

#menu1 li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear}

#menu1 a#pull {display:block;}

}

HTML MAIN MENU:
Copas di bawah kode penutup header atau di atas kode main-wrapper atau content-wrapper di template blog Anda.

<div id='menu-wrapper'>

<nav id='menu1'>

<input type='checkbox'/><label><span/></label>

<ul>

<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>

    <li><a href='/search/label/News?&amp;max-results=8' itemprop='url'><span itemprop='name'>News</span></a></li>

    <li><a href='/search/label/Sport?&amp;max-results=8' itemprop='url'><span itemprop='name'>Sport</span></a></li>

    <li><a href='/search/label/News?&amp;max-results=8' itemprop='url'><span itemprop='name'>Nasional</span></a></li>

    <li><a href='/search/label/News?&amp;max-results=8' itemprop='url'><span itemprop='name'>LifeStyle</span></a></li>

  <li><a href='#'>Categories <i class='fa fa-angle-double-down'/></a>

 <ul class='menus'>

 <li><a href='#'>Label 1</a></li>

 <li><a href='#'>Label 2</a></li>

 <li><a href='#'>Label 3</a></li>

 <li><a href='#'>Label 4</a></li>

 </ul></li>

<li><a href='#' target='_blank'>Link</a></li>

<li><a href='#'>Dropdown <i class='fa fa-angle-double-down'/></a>

 <ul class='menus'>

 <li><a href='#'>Submenu 1</a></li>

 <li><a href='#'>Submenu 2</a></li>

 <li><a href='#'>Submenu 3</a></li>

 </ul></li>

<li><a href='#' target='_blank'>Link</a></li>

</ul><a href='#' id='pull' style='font-family:Arial;font-size: 18px;'>MENU</a>

</nav>

  <div class='clear'/>

  </div>

Save!



Sekianlah artikel Crethuseo - 2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. Baiklah, sampai jumpa di artikel selanjutnya.

Bila kalian ada pertanyaan atau pendapat bisa kalian tulis dikomentar ❤

0 Response to 2 Menu Navigasi Blog Responsive Dropdown + Media Sosial Tanpa Javascript

Post a Comment
Subscribe to: Post Comments (Atom)