Membuat Tactile Top Menu Wrapper di Blog
11 March 2015
Membuat Tactile Top Menu Wrapper - Menu atas yang dilengkapi dengan menu with sub menu, search form, information atau note, simple menu, dan judul blog. Jika di scroll menu ini akan pada posisi tetap, tidak berubah. Menu ini saya dapatkan dari template bernama Jackdaw (bukan template blogspot) sebenarnya button info pada samping kanan adalah button yang memunculkan fly-out sidebar, tapi karena terlalu ribet jika menggunakan fly-out sidebar maka saya menggantinya dengan button info/note agar terlihat lebih menarik.
Tutorial Name : Tactile Top Menu Wrapper
For Platform : Blogger
Need CSS : Font Awesome Version 4.2.0
Top Menu By : Jackdaw Theme
Created On : March 2015
Demo Menu Ini bisa sobat Lihat pada anak blog dunia blanter yaitu BCDLA.
Tutorial Name : Tactile Top Menu Wrapper
For Platform : Blogger
Need CSS : Font Awesome Version 4.2.0
Top Menu By : Jackdaw Theme
Created On : March 2015
Demo Menu Ini bisa sobat Lihat pada anak blog dunia blanter yaitu BCDLA.
Jika sobat tertarik untuk memasang Top menu wrapper yang unik ini, silahkan ikuti tutorial dibawah ini dengan Teliti, atau sobat bisa juga mendownload File HTML, CSS, dan JAVASCRIPT.
Sebelum download hilangkan dulu tanda centangnya.
Sebelum download hilangkan dulu tanda centangnya.
HTML silahkan sobat letakan dibawah
<body> <!-- BEGIN MENU BUTTON -->
<div id='super-tabwrap'><div class='tactile-menu-button-wrapper'>
<div class='tactile-menu-button'>
<div class='tactile-menu-button-middle'>
</div>
</div>
</div>
<!-- END MENU BUTTON -->
<!-- BEGIN SEARCH BUTTON -->
<div class='tactile-search-button'>
<svg enable-background='new 0 0 512 512' height='512px' version='1.1' viewBox='0 0 512 512' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<path d='M208.464,363.98c-86.564,0-156.989-70.426-156.989-156.99C51.475,120.426,121.899,50,208.464,50 c86.565,0,156.991,70.426,156.991,156.991C365.455,293.555,295.029,363.98,208.464,363.98z M208.464,103.601 c-57.01,0-103.389,46.381-103.389,103.39s46.379,103.389,103.389,103.389c57.009,0,103.391-46.38,103.391-103.389 S265.473,103.601,208.464,103.601z M367.482,317.227c-14.031,20.178-31.797,37.567-52.291,51.166L408.798,462l51.728-51.729 L367.482,317.227z' id='magnifier-3-icon'/>
</svg>
</div>
<!-- END SEARCH BUTTON -->
<!-- BEGIN SIDEBAR BUTTON -->
<div class='tactile-sidebar-button'>
<svg enable-background='new 0 0 512 512' height='512px' version='1.1' viewBox='0 0 512 512' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<i class='fa fa-info-circle' style='color:#fff;font-size:20px;position:absolute;top:12px;right:5px;'/>
</svg>
</div>
<!-- END SIDEBAR BUTTON -->
<!-- BEGIN SEARCH FORM -->
<div class='tactile-search-wrapper-two'>
<!-- BEGIN SEARCH FORM CLOSE ICON -->
<div class='tactile-search-close-wrapper-two'>
<div class='tactile-search-close-button-two'>
</div>
</div>
<!-- END SEARCH FORM CLOSE ICON -->
<label for='search'>
Enter search term
</label>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text'/>
</form>
</div>
<!-- END SEARCH FORM -->
<!-- BEGIN SIDEBAR -->
<div class='tactile-sidebar-wrapper'>
<div class='tactile-sidebar-content-wrapper'>
<div class='tactile-sidebar-content-inner'>
<!-- BEGIN FULL WIDTH WIDGETS -->
<div class='tactile-widgets-wrapper'>
<div class='widget widget_text' id='text-4'>
<h4 class='widgettitle'>
NOTE
</h4>
<div class='textwidget'>
Content On This Note Here!
</div>
</div>
</div>
<!-- END FULL WIDTH WIDGETS -->
</div>
</div>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN SIDEBAR BACKGROUND OVERLAY -->
<div class='tactile-sidebar-background-overlay'>
</div>
<!-- END SIDEBAR BACKGROUND OVERLAY -->
<!-- BEGIN LOGO -->
<div class='tactile-logo-wrapper'>
<!-- BEGIN LOGO -->
<div class='tactile-logo'>
<a href='/'>
<h1><data:blog.title/></h1>
</a>
</div>
<!-- END LOGO -->
</div>
<!-- END LOGO -->
<!-- BEGIN HEADER BACKGROUND -->
<div class='tactile-header '>
</div>
<!-- END HEADER BACKGROUND -->
<!-- BEGIN HEADER BACKGROUND IMAGE -->
<!-- END HEADER BACKGROUND IMAGE -->
<!-- BEGIN MAIN MENU WRAPPER -->
<div class='tactile-menu-wrapper '>
<!-- BEGIN MENU -->
<div class='tactile-by-bonfire'>
<ul class='menu' id='menu-accordion'>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16' id='menu-item-16'>
<a href='https://www.facebook.com/DuniaBlanter'>
Facebook
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-17' id='menu-item-17'>
<a href='https://twitter.com/RhinokageRio' target='_blank'>
Twitter
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-18' id='menu-item-18'>
<a href='https://plus.google.com/+RhinokageRio' target='_blank'>
Google+
</a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
<!-- END MAIN MENU WRAPPER -->
<!-- BEGIN SEARCH BORDER -->
<div class='tactile-search-border'>
</div>
<!-- END SEARCH BORDER -->
<!-- BEGIN HORIZONTAL MENU WRAPPER -->
<div class='tactile-horizontal-menu-wrapper '>
<!-- BEGIN HORIZONTAL MENU -->
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class='tactile-by-bonfire-horizontal'>
<ul class='menu' id='menu-horizontal'>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-11' id='menu-item-11'>
<a href='/'>
HOME
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-13' id='menu-item-13'>
<a href='#menu1'>
MENU 1
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-14' id='menu-item-14'>
<a href='#menu2'>
MENU 2
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-14' id='menu-item-14'>
<a href='#menu3'>
MENU 3
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-84' id='menu-item-14'>
<a href='#menu+sub+menu1'>
MENU 4
</a>
<ul class='nav-ganteng'>
<li>
<a href='#submenu1'>
SUB MENU 1
</a>
</li>
<li>
<a href='#submenu2'>
SUB MENU 2
</a>
</li></ul>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-84' id='menu-item-84'>
<a href='#menu5' target='_blank'>
MENU 5
</a>
</li>
<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-84' id='menu-item-84'>
<a href='#your_link' target='_blank'>
JOIN THIS SITE
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END HORIZONTAL MENU -->
</div></div>
CSS silahkan sobat letakan diatas
]]></b:skin> atau </style> /* TACTILE TOP MENU WRAPPER */
.nav-ganteng {
position: absolute;
width: 140px;
background: rgb(28, 152, 225);
}
.nav-ganteng div {
font-size: 12px;
float: left;
color: rgb(150, 214, 252);
font-family: roboto;
font-weight: 700;
}
ul.nav-ganteng {
webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; transition: all .2s ease;
display: none;
}
.menu-item-84:hover .nav-ganteng {
webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; transition: all .2s ease;
display :block;
}
.tactile-header{position:fixed;z-index:9999;top:0;left:0;width:100%;height:103px;background-color:#1C98E1;-webkit-box-shadow:0 0 2px 0 rgba(91,97,102,0.8);-moz-box-shadow:0 0 2px 0 rgba(91,97,102,0.8);box-shadow:0 0 2px 0 rgba(91,97,102,0.8)}
.tactile-header-background-image{position:fixed;z-index:9998;top:0;left:0;width:100%;height:103px;background-size:auto;background-repeat:repeat}
.tactile-menu-button-wrapper{position:fixed;z-index:9999999;top:15px;left:11px;width:31px;height:30px;cursor:pointer;-webkit-transition:opacity .2s ease .3s,top 0 ease .3s;-moz-transition:opacity .2s ease .3s,top 0 ease .3s;-ms-transition:opacity .2s ease .3s,top 0 ease .3s;transition:opacity .2s ease .3s,top 0 ease .3s}
.tactile-menu-button{padding:8px 11px 10px 8px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}
.tactile-menu-button:after,.tactile-menu-button:before,.tactile-menu-button div.tactile-menu-button-middle:before{content:'';display:block;width:15px;height:2px;margin:2px 0;background-color:#fff;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease;outline:1px solid transparent}
.tactile-logo-wrapper{position:fixed;z-index:99999;top:11px;left:46px;height:37px;display:table;-webkit-margin-before:1px;-webkit-transition:opacity .2s ease .3s,top 0 ease .3s;-moz-transition:opacity .2s ease .3s,top 0 ease .3s;-ms-transition:opacity .2s ease .3s,top 0 ease .3s;transition:opacity .2s ease .3s,top 0 ease .3s}
.tactile-logo-main-menu-hidden{left:21px}
.tactile-logo-image{display:table-cell;vertical-align:middle}
.tactile-logo-image img{width:auto;max-height:32px;margin-top:3px}
.tactile-logo{display:table-cell;vertical-align:middle}
.tactile-logo a{font-family:'Roboto';font-weight:500;font-size:14px;text-decoration:none;letter-spacing:0;color:#fff;margin:0;padding:0;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
.tactile-logo a:hover{text-decoration:none;color:#fff}
.tactile-search-border,.tactile-search-border-main-menu-hidden{position:fixed;z-index:9999999;top:59px;left:10px;right:10px;border-bottom:1px solid rgba(255,255,255,0.3);display:block;padding:0;-webkit-transition:all .25s ease-out .15s;-moz-transition:all .25s ease-out .15s;-ms-transition:all .25s ease-out .15s;transition:all .25s ease-out .15s}
.tactile-search-border-active{top:84px;left:20px;right:20px;border-width:2px;-webkit-transition:all .2s ease-out .1s;-moz-transition:all .2s ease-out .1s;-ms-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s}
.tactile-search-border-active-two{top:44px;left:54px;right:20px;border-width:2px;-webkit-transition:all .2s ease-out .1s;-moz-transition:all .2s ease-out .1s;-ms-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s}
.tactile-search-border-active-two-main-menu-hidden{top:44px;left:20px;right:20px;border-width:2px;-webkit-transition:all .2s ease-out .1s;-moz-transition:all .2s ease-out .1s;-ms-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s}
.tactile-search-button{position:fixed;top:9px;right:43px;z-index:99999;width:30px;height:40px;cursor:pointer;-webkit-transition:opacity .2s ease .2s,top 0 ease .2s;-moz-transition:opacity .2s ease .2s,top 0 ease .2s;-ms-transition:opacity .2s ease .2s,top 0 ease .2s;transition:opacity .2s ease .2s,top 0 ease .2s}
.tactile-search-button svg{width:18px;height:18px;margin:12px 0 0 7px;padding:0;fill:#fff;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
.tactile-search-button:hover svg{fill:#FEE7D6}
.tactile-search-wrapper{position:fixed;z-index:999999;top:-1000px;left:22px;right:22px;height:103px;margin:0;padding:0;display:block;opacity:0;-webkit-transition:opacity .2s ease .1s,top 0 ease .4s;-moz-transition:opacity .2s ease .1s,top 0 ease .4s;-ms-transition:opacity .2s ease .1s,top 0 ease .4s;transition:opacity .2s ease-in .1s,top 0 ease .4s}
.tactile-search-wrapper-active{top:0!important;opacity:1;-webkit-transition:opacity .2s ease .1s,top 0 ease .25s!important;-moz-transition:opacity .2s ease .1s,top 0 ease .25s!important;-ms-transition:opacity .2s ease .1s,top 0 ease .25s!important;transition:opacity .2s ease .1s,top 0 ease .25s!important}
label[for=search]{font-family:'Roboto';font-weight:400;font-size:13px;color:#A7DAF8;letter-spacing:0;opacity:0;margin:35px 0 0 1px;padding:0;display:block;text-align:left;-webkit-transform:translateY(5px);-moz-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);-webkit-transition:all .25s ease 0;-moz-transition:all .25s ease 0;-ms-transition:all .25s ease 0;transition:all .25s ease 0}
.tactile-search-wrapper-active label[for=search]{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .25s ease .2s;-moz-transition:all .25s ease .2s;-ms-transition:all .25s ease .2s;transition:all .25s ease .2s}
.tactile-search-wrapper #searchform input{width:100%;height:100%;font-size:23px;font-family:'Roboto';font-weight:400;color:#fff;padding:2px 0 4px;margin:0;letter-spacing:-.1px;border:0;background:none;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease;transition:all .15s ease}
.tactile-search-wrapper #searchform input:focus{outline:0}
#searchform input::-webkit-input-placeholder{color:#7F848A!important}
#searchform input:-moz-placeholder{color:#7F848A!important}
#searchform input::-moz-placeholder{color:#7F848A!important}
#searchform input:-ms-input-placeholder{color:#7F848A!important}
.tactile-search-close-wrapper{position:absolute;z-index:9999999;top:20px;right:-9px;width:20px;height:20px;cursor:pointer;display:block}
.tactile-search-close-button:before,.tactile-search-close-button:after{content:'';display:block;width:15px;height:2px;margin:0;background-color:#fff;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease;outline:1px solid transparent}
.tactile-search-close-button:before{-webkit-transform:translateY(6px) rotate(45deg);-moz-transform:translateY(6px) rotate(45deg);-ms-transform:translateY(6px) rotate(45deg);transform:translateY(6px) rotate(45deg)}
.tactile-search-close-button:after{-webkit-transform:translateY(4px) rotate(-45deg);-moz-transform:translateY(4px) rotate(-45deg);-ms-transform:translateY(4px) rotate(-45deg);transform:translateY(4px) rotate(-45deg)}
.tactile-search-wrapper-two{position:fixed;z-index:999999;top:-1000px;left:54px;right:50px;height:50px;margin:0;padding:12px 0 0 1px;display:block;opacity:0;-webkit-transition:opacity .2s ease 0s,top 0 ease .5s;-moz-transition:opacity .2s ease 0s,top 0 ease .5s;-ms-transition:opacity .2s ease 0s,top 0 ease .5s;transition:opacity .2s ease-in 0s,top 0 ease .5s}
.tactile-search-wrapper-active-two{top:0!important;opacity:1;-webkit-transition:opacity .2s ease .1s,top 0 ease .1s;-moz-transition:opacity .2s ease .1s,top 0 ease .1s;-ms-transition:opacity .2s ease .1s,top 0 ease .1s;transition:opacity .2s ease-in .1s,top 0 ease .1s}
.tactile-search-wrapper-two label[for=search]{display:none}
.tactile-search-wrapper-two #searchform input{width:100%;height:100%;font-size:23px;font-family:'Roboto';font-weight:400;color:#fff;padding:2px 0 4px;margin:0;letter-spacing:-.1px;border:0;background:none;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease;transition:all .15s ease}
.tactile-search-wrapper-two #searchform input:focus{outline:0}
#searchform input::-webkit-input-placeholder{color:#7F848A!important}
#searchform input:-moz-placeholder{color:#7F848A!important}
#searchform input::-moz-placeholder{color:#7F848A!important}
#searchform input:-ms-input-placeholder{color:#7F848A!important}
.tactile-search-close-wrapper-two{position:absolute;z-index:9999999;top:23px;right:-34px;width:20px;height:20px;cursor:pointer;display:block}
.tactile-search-close-button-two:before,.tactile-search-close-button-two:after{content:'';display:block;width:15px;height:2px;margin:0;background-color:#fff;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease;outline:1px solid transparent}
.tactile-search-close-button-two:before{-webkit-transform:translateY(6px) rotate(45deg);-moz-transform:translateY(6px) rotate(45deg);-ms-transform:translateY(6px) rotate(45deg);transform:translateY(6px) rotate(45deg)}
.tactile-search-close-button-two:after{-webkit-transform:translateY(4px) rotate(-45deg);-moz-transform:translateY(4px) rotate(-45deg);-ms-transform:translateY(4px) rotate(-45deg);transform:translateY(4px) rotate(-45deg)}
.tactile-sidebar-button{position:fixed;top:9px;right:14px;z-index:999999999;width:25px;height:40px;cursor:pointer;-webkit-transition:opacity .2s ease .2s,top 0 ease .2s;-moz-transition:opacity .2s ease .2s,top 0 ease .2s;-ms-transition:opacity .2s ease .2s,top 0 ease .2s;transition:opacity .2s ease .2s,top 0 ease .2s}
.tactile-sidebar-button svg{width:20px;height:20px;margin:11px 0 -1px 5px;fill:#fff;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
.tactile-sidebar-button-active{position:fixed!important}
.tactile-sidebar-button-active svg{fill:#BBBCBD;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
@-webkit-keyframes tactile-sidebar {
20%{-webkit-transform:translateX(11px)}
40%{-webkit-transform:translateX(-7px)}
60%{-webkit-transform:translateX(4px)}
80%{-webkit-transform:translateX(-2px)}
100%{-webkit-transform:translateX(0)}
}
@keyframes tactile-sidebar {
20%{transform:translateX(11px)}
40%{transform:translateX(-7px)}
60%{transform:translateX(4px)}
80%{transform:translateX(-2px)}
100%{transform:translateX(0)}
}
.tactile-sidebar-wrapper{position:fixed;z-index:99999999;top:0;width:265px;overflow:hidden;height:auto;margin:0;padding:0;background-color:#1B1F22;display:block;color:#767676;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.75);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.75);box-shadow:0 0 5px 0 rgba(0,0,0,0.75);-webkit-overflow-scrolling:touch;overflow:auto;right:-285px;-webkit-transition:all .35s ease;-moz-transition:all .35s ease;transition:all .35s ease}
.tactile-sidebar-wrapper-active{right:-20px;-webkit-animation-name:tactile-sidebar;animation-name:tactile-sidebar;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}
.tactile-sidebar-content-wrapper{display:table;height:auto;margin:0 20px 0 10px}
.tactile-sidebar-content-inner{display:table-cell;vertical-align:top;padding:40px 0 20px}
.tactile-sidebar-content-inner img,.tactile-sidebar-content-inner iframe,.tactile-sidebar-content-inner object,.tactile-sidebarcontent-inner embed{max-width:100%;height:auto}
.tactile-sidebar-background-overlay{position:fixed;z-index:9999999;top:-1000%;left:0;right:0;width:100%;height:100%;background-color:#000;opacity:0;-webkit-transition:top 0 ease .35s,opacity .35s ease;-moz-transition:top 0 ease .35s,opacity .35s ease;-ms-transition:top 0 ease .35s,opacity .35s ease;transition:top 0 ease .35s,opacity .35s ease}
.tactile-sidebar-background-overlay-active{top:0;opacity:.3;-webkit-transition:top 0 ease 0s,opacity .35s ease;-moz-transition:top 0 ease 0s,opacity .35s ease;-ms-transition:top 0 ease 0s,opacity .35s ease;transition:top 0 ease 0s,opacity .35s ease}
.tactile-menu-wrapper{position:fixed;z-index:99999999;top:-1000%;left:46px;min-width:140px;margin:0;padding:0;background-color:#fff;-webkit-transform:translate3d(0,0,0);-webkit-overflow-scrolling:touch;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 10px;-moz-transform-origin:0 10px;-ms-transform-origin:0 10px;transform-origin:0 10px;-webkit-transition:-webkit-transform .25s ease,top 0 ease .5s,opacity .2s ease 0;-moz-transition:-moz-transform .25s ease,top 0 ease .5s,opacity .2s ease 0;-ms-transition:-ms-transform .25s ease,top 0 ease .5s,opacity .2s ease 0;transition:transform .25s ease,top 0 ease .5s,opacity .2s ease 0;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}
.tactile-menu-wrapper-active{top:16px;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .25s ease,top 0 ease 0s,opacity .2s ease 0;-moz-transition:-moz-transform .25s ease,top 0 ease 0s,opacity .2s ease 0;-ms-transition:-ms-transform .25s ease,top 0 ease 0s,opacity .2s ease 0;transition:transform .25s ease,top 0 ease 0s,opacity .2s ease 0}
.tactile-by-bonfire ul{list-style-type:none;margin:0;padding:0;margin:0}
.tactile-by-bonfire ul li{min-width:140px;list-style-type:none;margin:0;padding:0;text-align:left;overflow:hidden}
.tactile-by-bonfire ul li a{width:100%;font-size:14px;font-family:'Roboto';font-weight:500;color:#A7ABB4;margin:0 0 -5px;padding:7px 0 7px 15px;display:inline-block;text-decoration:none;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;transition:all .2s ease}
.tactile-by-bonfire ul .menu-item-has-children a{margin:0 25px -1px 0}
.tactile-by-bonfire > ul > li:first-child{padding-top:5px}
.tactile-by-bonfire > ul > li:last-child{padding-bottom:5px}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
.tactile-by-bonfire ul li a{margin:0}
}
.tactile-by-bonfire ul li a:active{color:#BDC1C9}
.tactile-by-bonfire ul li a:hover{color:#F99D22}
.tactile-by-bonfire ul li{opacity:0}
.tactile-menu-wrapper-active .tactile-by-bonfire ul li{opacity:1;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;transition:opacity .5s ease}
.tactile-by-bonfire .menu{list-style:none;margin:0;padding:0}
.tactile-by-bonfire .menu li{position:relative;margin:0;padding:0;border:none;z-index:auto}
.tactile-by-bonfire .menu li span{display:inline-block;width:34px;height:32px;position:absolute;z-index:999;top:0;right:0;margin:0;padding:0;cursor:pointer;text-align:center;line-height:22px;border-left:1px solid #EBEBEB}
.tactile-by-bonfire .menu li span svg{width:10px;height:10px;padding:0;margin:11px 2px 0 0;fill:#8C9093;pointer-events:none;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}
.tactile-by-bonfire .menu li span:hover svg{fill:#000}
.tactile-by-bonfire .menu li span.tactile-submenu-active svg{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}
.tactile-by-bonfire .menu ul{list-style:none;margin:0;padding:0;display:none}
.tactile-by-bonfire ul.sub-menu a{width:100%;font-size:12px;font-family:'Roboto';font-weight:500;color:#A7ABB4;margin:0;padding:9px 0 6px 15px !important}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
.tactile-by-bonfire ul.sub-menu a{padding-top:8px!important;padding-bottom:7px!important}
}
.tactile-by-bonfire .sub-menu li{position:relative;z-index:99999;background:#fff}
.waves-effect{overflow:hidden}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;opacity:0;background-color:#EBEBF2;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;-ms-transition-property:-ms-transform,opacity;transition-property:transform,opacity}
a.waves-effect .waves-ripple{z-index:-1}
.tactile-horizontal-menu-wrapper{position:fixed;z-index:9999;top:60px;left:0;width:100%;height:43px;margin:0;-webkit-margin-before:1px;padding:0;-webkit-transition:opacity .2s ease .3s,top 0 ease .3s;-moz-transition:opacity .2s ease .3s,top 0 ease .3s;-ms-transition:opacity .2s ease .3s,top 0 ease .3s;transition:opacity .2s ease .3s,top 0 ease .3s}
.swiper-container{max-width:100%!important}
.swiper-wrapper{width:3000px!important}
.tactile-by-bonfire-horizontal ul{list-style-type:none;padding:0;margin:0}
.tactile-by-bonfire-horizontal ul li{list-style-type:none;display:inline-block;margin:0 -4px 0 0;padding:0;text-align:left;overflow:hidden;border-bottom:2px solid transparent}
.tactile-by-bonfire-horizontal ul li:last-child{margin-right:1px!important}
.tactile-by-bonfire-horizontal ul li a{font-size:11px;font-family:'Roboto';font-weight:700;color:#96D6FC;margin:0;padding:15px 19px 12px 20px;text-decoration:none;display:block;letter-spacing:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;transition:all .2s ease}
.tactile-by-bonfire-horizontal ul li a:hover{color:#fff}
.tactile-by-bonfire-horizontal ul li.current-menu-item{border-color:#fff}
.tactile-by-bonfire-horizontal ul li.current-menu-item a{color:#fff}
.tactile-widgets-wrapper{margin:0;padding:0;width:205px}
.tactile-widgets-wrapper .widget{font-family:'Roboto',arial,tahoma,verdana;font-weight:500;font-size:13px;line-height:17px;color:#A4ADB3;letter-spacing:0;width:100%;display:inline-block;vertical-align:top;background:none;padding:0 10px 20px;margin-bottom:10px;word-wrap:break-word;text-align:left}
.tactile-widgets-wrapper .widget li{list-style:none;width:195px;padding:5px!important;border:none}
.tactile-widgets-wrapper .widget a{color:#fff;text-decoration:none}
.tactile-widgets-wrapper .widget a:hover{text-decoration:underline}
.tactile-widgets-wrapper .widgettitle{font-family:'Roboto',arial,tahoma,verdana;font-weight:500;font-size:12px;color:#7C8184;line-height:17px;letter-spacing:0;margin:20px 0 3px 5px;text-transform:uppercase}
.tactile-widgets-wrapper .widget select{width:100%;max-width:200px}
.tactile-widgets-wrapper .widget_recent_entries li{border-bottom:1px solid #323232;padding-top:10px;padding-bottom:10px}
.tactile-widgets-wrapper .textwidget{margin-left:5px}
.tactile-widgets-wrapper .post-date,.tactile-widgets-wrapper .rss-date{font-size:11px;color:#717477;display:block;margin-top:4px}
.tactile-widgets-wrapper .widget_archive ul{list-style-type:none}
.tactile-widgets-wrapper .widget_archive li{display:block}
.tactile-widgets-wrapper .widget_categories ul{list-style-type:none;padding:0;margin:0}
.tactile-widgets-wrapper .widget_categories li{display:block}
.tactile-widgets-wrapper .widget_recent_comments li{border-bottom:1px solid #323232;padding-top:10px;padding-bottom:10px}
.tactile-widgets-wrapper .widget_meta ul{list-style-type:none;padding:0;margin:0}
.tactile-widgets-wrapper .widget_meta li{display:block}
.tactile-widgets-wrapper #wp-calendar{width:100%}
.tactile-widgets-wrapper #wp-calendar caption{font-family:'Roboto',arial,tahoma,verdana;font-weight:500;font-size:12px;margin:0}
.tactile-widgets-wrapper #wp-calendar tr{text-align:center}
.tactile-widgets-wrapper #wp-calendar .pad{background:none}
.tactile-widgets-wrapper #wp-calendar th{padding:0;margin:0}
.tactile-widgets-wrapper #wp-calendar tr td{padding:0;margin:0;background:none}
.tactile-widgets-wrapper .widget_search{margin:2px 12px 0 0}
.tactile-widgets-wrapper .widget_search input{font-family:'Roboto',arial,tahoma,verdana;font-weight:500;font-size:13px;color:#fff;width:100%;height:40px;padding:0 0 0 8px;border:0;-webkit-appearance:none;-webkit-border-radius:0;border-bottom:2px solid #323232;background:none}
.tactile-widgets-wrapper .widget_search input::-webkit-input-placeholder{color:#717477}
.tactile-widgets-wrapper .widget_search input:-moz-placeholder{color:#717477}
.tactile-widgets-wrapper .widget_search input::-moz-placeholder{color:#717477}
.tactile-widgets-wrapper .widget_search input:-ms-input-placeholder{color:#717477}
.tactile-widgets-wrapper .tagcloud,.tactile-widgets-wrapper .categories{padding:10px 5px}
.tactile-widgets-wrapper .widget_nav_menu .sub-menu{margin:5px 0 0 5px;padding:0;position:static}
.tactile-widgets-wrapper .widget_nav_menu .menu li,.tactile-widgets-wrapper .widget_nav_menu .menu li.sub{margin:0;padding:0}
.tactile-widgets-wrapper .widget_nav_menu .menu li a,.tactile-widgets-wrapper .widget_nav_menu .menu li.sub a{text-decoration:none;background:none;margin:0;padding:0}
.tactile-opacity-zero{opacity:.2;top:-1000px;-webkit-transition:opacity .2s ease 0s,top 0 ease .2s;-moz-transition:opacity .2s ease 0s,top 0 ease .2s;-ms-transition:opacity .2s ease 0s,top 0 ease .2s;transition:opacity .2s ease 0s,top 0 ease .2s}
.tactile-absolute{position:absolute}
.wp-toolbar-active{margin-top:32px}
@media screen and (max-width: 782px) {
.wp-toolbar-active{margin-top:46px}
#wpadminbar{position:fixed!important}
}
Javascript silahkan sobat letakan diatas
</body> atau </head> <script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
'use strict';
$('.tactile-by-bonfire ul li ul').before($('<span><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><polygon id="arrow-24-icon" points="206.422,462 134.559,390.477 268.395,256 134.559,121.521 206.422,50 411.441,256 "/></svg></span>'));
$(".menu > li > span, .sub-menu > li > span").on('touchstart click', function(e) {
e.preventDefault();
if (false == $(this).next().is(':visible')) {
$(this).parent().siblings().find(".sub-menu").slideUp(300);
$(this).siblings().find(".sub-menu").slideUp(300);
$(this).parent().siblings().find("span").removeClass("tactile-submenu-active");
}
$(this).next().slideToggle(300);
$(this).toggleClass("tactile-submenu-active");
})
$(".menu > li > span").on('touchstart click', function(e) {
e.preventDefault();
if($(".sub-menu > li > span").hasClass('tactile-submenu-active'))
{
$(".sub-menu > li > span").removeClass("tactile-submenu-active");
}
})
$(".tactile-menu-button-wrapper").on('touchstart click', function(e) {
if($(".menu > li > span, .sub-menu > li > span").hasClass('tactile-submenu-active'))
{
$(".menu > li").find(".sub-menu").slideUp(300);
$(".menu > li > span, .sub-menu > li > span").removeClass("tactile-submenu-active");
}
})
});
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2(\'.0-1-8\').l(\'o n\',f(e){\'q m\';e.k();v(2(\'.0-1-4-3\').r(\'0-1-4-6-3\')){2(\'.0-1-4-3\').7(\'0-1-4-6-3\');2(\'.0-1-4-3 #d #s\').p();2(\'.0-1-5\').7(\'0-1-5-6-3\');2(\'.0-1-5-b-a-9\').7(\'0-1-5-6-3-b-a-9\');2(\'.0-h-4, .0-1-8, .0-i-8\').7(\'0-j-g\')}t{u(f(){2(\'.0-1-4-3\').c(\'0-1-4-6-3\')},w);2(\'.0-1-4-3 #d #s\').x();2(\'.0-1-5\').c(\'0-1-5-6-3\');2(\'.0-1-5-b-a-9\').c(\'0-1-5-6-3-b-a-9\');2(\'.0-h-4, .0-1-8, .0-i-8\').c(\'0-j-g\')}});2(\'.0-1-y-4-3\').l(\'o n\',f(e){\'q m\';e.k();2(\'.0-1-4-3\').7(\'0-1-4-6-3\');2(\'.0-1-4-3 #d #s\').p();2(\'.0-1-5\').7(\'0-1-5-6-3\');2(\'.0-1-5-b-a-9\').7(\'0-1-5-6-3-b-a-9\');2(\'.0-h-4, .0-1-8, .0-i-8\').7(\'0-j-g\')});',35,35,'tactile|search|jQuery|two|wrapper|border|active|removeClass|button|hidden|menu|main|addClass|searchform||function|zero|logo|sidebar|opacity|preventDefault|on|strict|click|touchstart|blur|use|hasClass||else|setTimeout|if|100|focus|close'.split('|'),0,{}))
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2(k).p(3(){\'f c\';2(".6-0").a(\'6-0-b\');4(3(){2(".1-0-7").5(\'1-0-7-9\')},g);4(3(){2("#1-0").5(\'1-0-h\');2("8").a(\'1-8-i\')},j);4(3(){2("#1-0, .1-0-7").5(\'1-0-9\')},d)});4(3(){2(".6-0").5(\'6-0-b\')},l);2(\'.6-0\').m(\'n o\',3(e){\'f c\';e.q();2(".6-0").a(\'6-0-b\');4(3(){2(".1-0-7").5(\'1-0-7-9\')},g);4(3(){2("#1-0").5(\'1-0-h\');2("8").a(\'1-8-i\')},j);4(3(){2("#1-0, .1-0-7").5(\'1-0-9\')},d)});',27,27,'pageloader|bonfire|jQuery|function|setTimeout|addClass|close|icon|html|hide|removeClass|active|strict|1000||use|250|fade|onload|500|window|6000|on|touchstart|click|load|preventDefault'.split('|'),0,{}))
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1(\'.0-4-6-2\').f(\'k d\',c(e){\'h g\';e.i();o(1(\'.0-4-6-2\').j(\'0-4-5\')){1(\'.0-4-2\').7(\'0-4-2-5\');1(\'.0-4-6-2\').7(\'0-4-5\')}l{1(\'.0-4-2\').b(\'0-4-2-5\');1(\'.0-4-6-2\').b(\'0-4-5\')}});1(\'.0-3-6\').f(\'k d\',c(e){\'h g\';e.i();o(1(\'.0-3-2\').j(\'0-3-2-5\')){1(\'.0-3-6\').7(\'0-3-6-5\');1(\'.0-3-2\').7(\'0-3-2-5\');1(\'.0-3-8-9\').7(\'0-3-8-9-5\')}l{1(\'.0-3-6\').b(\'0-3-6-5\');1(\'.0-3-2\').b(\'0-3-2-5\');1(\'.0-3-8-9\').b(\'0-3-8-9-5\');1(\'.0-4-2\').7(\'0-4-2-5\');1(\'.0-4-6-2\').7(\'0-4-5\')}});1(\'.0-4-6-2, .0-4-2, .0-3-6, .0-3-2\').f(\'m d\',c(e){e.r()});1(n).f(\'m d\',c(e){1(\'.0-4-2\').7(\'0-4-2-5\');1(\'.0-4-6-2\').7(\'0-4-5\');1(\'.0-3-6\').7(\'0-3-6-5\');1(\'.0-3-2\').7(\'0-3-2-5\');1(\'.0-3-8-9\').7(\'0-3-8-9-5\')});1(n).q(c(){\'h g\';1(\'.0-E-s t u a\').b(\'v-w\')});x y=z A(\'.B-C\',{D:p});',41,41,'tactile|jQuery|wrapper|sidebar|menu|active|button|removeClass|background|overlay||addClass|function|click||on|strict|use|preventDefault|hasClass|touchstart|else|touchend|document|if|true|ready|stopPropagation|bonfire|ul|li|waves|effect|var|mySwiper|new|Swiper|swiper|container|scrollContainer|by'.split('|'),0,{}))
//]]>
</script>
Jika Dilihat Memang Banyak sekali CSS dan HTML, tapi hasilnya akan memuaskan. Dan jangan lupa untuk Memasang font awesome 4.2.0 agar icon button dapat muncul.
Dan jika ada sobat yang ingin me ReDesign template tapi tidak bisa atau tidak sempat, sobat bisa menggunakan jasa admin blog ini, "Jasa ReDesign Template Blogger"
Harga murah meriah.
Dan jika anda ingin membeli kaos atau membaca artikel tentang Indonesia anda bisa langsung kelink di bawah ini.
Harga murah meriah.
Dan jika anda ingin membeli kaos atau membaca artikel tentang Indonesia anda bisa langsung kelink di bawah ini.
- www.beeindo.com - Store
- blog.beeindo.com - Article
- beeindo.blogspot.com - Article
Semoga Bermanfaat...