Rasanya tidak perlu lagi menjelaskan apa itu Menu Dropdown Navigasi Responsive, cukup lewat gambar diatas sobat sudah tahu artinya.
Tapi karena untuk mengisi Deskripsi postingan ini walau tidak begitu betul pengertiannya,
Baiklah saya jelaskan sedikit mengenai apa yang dimaksud Menu Dropdown Navigasi Responsive yaitu menu tab gabungan menu horisontal dan menu navigasi vertikal, dan responsive artinya bisa menyesuaikan keadaan layar.
Untuk demo bisa dilihat diblog ini jika belum berubah atau bisa dibuka diblog http://jon-newrow.blogspot.com/.
Menu Dropdown Navigasi Responsive ini saya dapat dari situs http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly.
Namun Menu Dropdown Navigasi Responsive sudah saya modif karena pada aslinya tidak punya warna juga belum sesuai dengan template saya.
Baiklah langsung saja ke Cara membuat Menu Dropdown Navigasi Responsive:
- Pertama-tama seperti biasa buka edit template dan jangan lupa simpan data template terlebih dahulu
- Kedua, untuk penempatan kode CSS cari kode ]]></b:skin> atau kode </style> gunakan CTRL+F supaya cepat dan letakkan kode dibawah diatas kode tersebut:
#nav{font-family: 'Open Sans', sans-serif;font-weight: 400;position: relative;
margin:1.2% 0 0 1.2%;width: 97.6%;}
#nav > a{display: none;}
#nav li{position: relative;list-style: none;}
#nav li a{color: #fff;display: block;}
#nav li a:active{background-color: #c00 !important;}
#nav span:after{width: 0;height: 0;border: 0.313em solid transparent; border-bottom: none;
border-top-color: #efa585;content: '';vertical-align: middle;display: inline-block;
position: relative;right: -0.313em;}
#nav > ul{height: 2.8em; background-color: #e15a1f;list-style: none; border-bottom: 3px solid #45250A;}
#nav > ul > li{width: 12%;height: 100%;float: left;}
#nav > ul > li > a{height: 100%;font-size: 1.3em; line-height: 2.2em; text-align: center;}
#nav > ul > li:not( :last-child ) > a{border-right: 1px solid #cc470d;}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{background-color: #cc470d;}
#nav li ul{background-color: #cc470d;display: none;position: absolute;top: 100%;}
#nav li:hover ul{display: block;left: 0;right: 0;width: 150%;}
#nav li:not(:first-child ):hover ul{left: -1px;}
#nav li ul a{font-size: 1.2em;border-top: 1px solid #e15a1f;padding: 0.5em; }
#nav li ul li a:hover,#nav li ul:not( :hover ) li.active a{background-color: #e15a1f;}
@media only screen and ( max-width: 62.5em ){#nav{width: 100%;position: static;margin: 0;}}
@media only screen and ( max-width: 40em ){html{font-size: 75%; }
#nav{position: relative;top: auto;left: auto;}
#nav > a{width: 3.125em; height: 3.125em; text-align: left;text-indent: -9999px;
background-color: #e15a1f;position: relative;}
#nav > a:before,#nav > a:after{position: absolute;border: 2px solid #fff;top: 35%;left: 25%;
right: 25%;content: '';}
#nav > a:after{top: 60%;}
#nav:not( :target ) > a:first-of-type,#nav:target > a:last-of-type{display: block;}
#nav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav:target > ul{display: block;}
#nav > ul > li{width: 100%;float: none;}
#nav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#nav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #cc470d;}
#nav li ul{position: static;padding: 1.25em; padding-top: 0;}}
- Ketiga, letakan kode HTML seperti contoh dibawah:
<nav id='nav' role='navigation'>
<a href='#nav' title='Show navigation'>Show navigation</a>
<a href='#' title='Hide navigation'>Hide navigation</a>
<ul class='clearfix'>
<li><a href='?home'>Home</a></li><li>
<a aria-haspopup='true' href='?blog'><span>Blog</span></a><ul>
<li><a href='?design'>Design</a></li>
<li><a href='?html'>HTML</a></li>
<li><a href='?css'>CSS</a></li>
<li><a href='?javascript'>JavaScript</a></li>
</ul></li><li>
<a aria-haspopup='true' href='?work'><span>Work</span></a>
<ul><li><a href='?webdesign'>Web Design</a></li>
<li><a href='?typography'>Typography</a></li>
<li><a href='?frontend'>Front-End</a></li></ul>
</li><li><a href='?about'>About</a></li>
- Keempat yaitu penambahan sedikit kode script, dan letakan dibawah diatas kode </head> :
$( '#nav li:has(ul)' ).doubleTapToGo();
- Selesai sudah pembuatan Menu Dropdown Navigasi Responsive.