Kompiflexible responsive menu without left menu
Kompiflexible responsive menu without left menu
by ducrat
HTML
<div class='wrap-menu'>
<div id='menu-container'>
<div class='content-wrapper'>
<div class='mobile-menu-ikon' onclick='openMobilemenu()'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpi/P//PwM1AQsQU9VEJgYqg8FvICgMGUeel0eTzWiyGU02Qz/ZAAQYAOPcBjEdYroKAAAAAElFTkSuQmCC' /></div>
<div class='menu-search' onclick='openSosprofil()'><span id='search-icon'><i class='fa fa-search'></i></span><span id='close-icon'><i class='fa fa-times'></i></span></div>
<div class='mobile-menu-nav' id='mobile-menu-nav'>
<nav class='page-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li><a href='/' itemprop='url' title='KompiAjaib.com'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='//kompiflexible.blogspot.com/p/contact-form.html' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='//kompiflexible.blogspot.com/p/sitemap.html' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='btn-sosial' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'>
<link href='http://kompiflexible.blogspot.com/' itemprop='url'/>
<ul>
<li><a href='https://www.facebook.com/your-username' itemprop='sameAs' target='_blank' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
<li><a href='https://twitter.com/your-username' itemprop='sameAs' target='_blank' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
<li><a href='https://www.google.com/your-username' itemprop='sameAs' target='_blank' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
<li><a href='id.linkedin.com/in/your-username' itemprop='sameAs'...CSS
.btn-sosial ul,ol,ul{list-style:none}
div,li,ul{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
#menu-container,.menu,.menu-search{transition:all .4s ease-in-out}
.wrap-menu{margin:0 auto;padding:0;width:100%;height:auto}
#menu-container{background:#000;margin:0 auto;padding:0;position:fixed;top:0;left:0;z-index:999;width:100%;height:auto}
.menu,.menu-search{padding:0;display:inline}
.menu,.menu-search,.btn-sosial a{color:#efefef;font-weight:400}
.clear{clear:both!important}
.mobile-menu-ikon{margin:0;color:#fff;font-size:30px;cursor:pointer;display:none}
.menu{float:left;margin-top:6px;margin-left:5px;margin-right:20px;font-size:30px;cursor:pointer}
.menu-search{float:right;margin-top:11px;margin-right:5px;font-size:20px;cursor:pointer}
#close-icon{display:none;margin-left:3px;}
.btn-sosial{float:right;margin-top:13px;margin-right:10px}
.btn-sosial li{float:left;display:inline-block;margin-right:10px}
.btn-sosial a:hover{color:red!important}
.menu-search:hover,.menu:hover,#close-icon:hover{color:red}
#search-box{position:absolute;top:38px;right:0;width:300px;display:none;height:27px;border-right:none;padding:0;margin:0;}
#search-box form{background:#000;padding:10px;position:relative}
#search-box form,#search-form,.search-button{border:none;line-height:27px}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;font-family:Roboto,sans-serif;font-weight:300;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:10px;left:10px;font-size:16px;color:#888;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.tombol:after,.tombol:before{color:#000;text-shadow:0 1px 0 #999}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
.page-menu ul li{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms...