Menu Responsive Blogger

Ένα καταπληκτικό menu αναδιπλωμένο προς τα κάτω με μια αργή κίνηση όταν ο δεκτης περνάει από πάνω στις κυριες λέξης του menu.

Πριν την αντιγραφή επικόλληση που θέλετε να κάνετε για να το τοποθετήσετε εκεί που θέλετε θα πρέπει να αλλάξετε τα URL.
Kαι ότι πορτοκαλι να αντικαταστήσετε της λέξης με της δικες σας που είναι σχετικές με το blog και site σας!




[ LIVE DEMO ]


<div id='topnav-outside'>
<div id='topnav-intside'>
<div class='bofollowbutton-nav'>
<a href='https://www.facebook.com/URL' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdlg2ul8gr3NvICO4P1-b_kaig0Aei8Jfxs-l6d0QIrasC9HIU7OiZUBEEDdsjenR4cahdXPoMInHRKWxcFT62KcgIIbSx74D_4k55eeT7XNJdLp650pHku7wrgbCkfVju-HOjRc7yKJLm/s1600/facebook_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://twitter.com/URL' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZvNYyHQGgEDJe-AmV78BBizUBbnPk-5SLrvpfc1PxuNxobq0JNiWHJ4xiXjvgUfOVyt-kd0kkenNeK1-TbzLpq8GY005s1HJZFBXoYRp5FuiVhsn20S7vSiNwT4_MnLFXRh2elgeeeQb/s1600/twitter_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://plus.google.com/URL' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSEAjnQr1uLvBEvIj68qgxhemTjpQfVtdGcTfnUJQa_UWIyiAL_-2RgFrJqjyrj9SdkhjaSUAp7KZKUeF7w3GYoguZCUV1juA1YVKfUvpT_tTTM_8tKh33Iv8gXUKvCw9T2jjwVKZgDAMY/s1600/gplus_bo.png'/>
</a>
</div>
<div id='bonav' role='navigation'>
<a href='#bonav' title='Show navigation'>
&#9776; Show Menu
</a>
<a href='#' title='Hide navigation'>
&#9776; Hide Menu
</a>
<ul>
<li class='home-icon'>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsAhGTnC9vYpFejrqDICeOUGep8W1GtAEQPUxkfYhSnaggoYgLccrKZV1OsCFGbEjegaeQByadrpDCekk9xWz3N66WXKqwOgIfw11BmdZcTAmYNx6D_KeBrnb3JMq4LNEg7JYoNcHVF1rj/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a>
</li>
<li class='has-child'><a aria-haspopup='true' href='URL'>FoulsCode.com</a>
<ul>
<li><a href='URL'>Sub Menu Item 1</a></li>
<li><a href='URL'>Sub Menu Item 1.1</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='URL'>Menu Item 2</a>
<ul>
<li><a href='URL'>Sub Menu Item 2</a></li>
<li><a href='URL'>Sub Menu Item 2.2</a></li>
<li><a href='URL'>Sub Menu Item 2.3</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='URL'>Menu Item 3</a>
<ul>
<li><a href='URL'>Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href='URL'>Menu Item 4</a></li>
</ul>
</div>
</div>
</div>
<style>
/* foulscode.com */
#topnav-outside {background:#fff;width:100%;min-height:30px;margin:0 auto;padding:0;-moz-box-shadow: 0 8px 6px -6px #ccc;-webkit-box-shadow: 0 8px 6px -6px #ccc;box-shadow: 0 8px 6px -6px #ccc;}
#topnav-intside {max-width:1000px;min-height:30px;margin:0 auto;padding:0;}
.bofollowbutton-nav{float:right;margin:0;padding:8px 5px 0 5px;overflow:hidden;clear:both;}
.status-msg-wrap{display:none;}
#bonav li.has-child {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbCBQLRusZadoP3vKcQ26ovlOpKynQTYzhBmNidj2pChR26Uo82hwkvvCX0w7Ffd4uCIIPgyUV-A04_lTRm9AAy6_0te9JaQBgpAi1BjpSjbdycdIHY0V0678SVTisI7o_WZlgrjzW4MQ/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}
#bonav{max-width:1000px;text-transform:uppercase;}
#bonav > a{display: none;}
#bonav li{list-style-type: none;position: relative;}
#bonav li a{display: block;color: #4285f4;text-decoration:none;}
#bonav li a:active{background-color: #c00 !important;}
#bonav span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}
/* foulscode.com */
#bonav > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}
#bonav > ul > li{width: 15%;height: 100%;float: left;}
#bonav > ul > li.home-icon{max-width:120px;}
#bonav > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#bonav > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}
#bonav > ul > li:hover > a,#bonav > ul:not( :hover ) > li.active > a{color: #333;}
#bonav li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}
#bonav li:hover ul{display: block;left: 0;right: 0;}
#bonav li:not( :first-child ):hover ul{//left: -1px;}
#bonav li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;}
#bonav li ul li a:hover,#bonav li ul:not( :hover ) li.active a{background-color: #333;}
@media only screen and ( max-width: 60em ) {
#bonav{font-size: 75%;position: relative;top: auto;left: auto;}
#bonav > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}
#bonav > a:after{top: 60%;}
#bonav:not( :target ) > a:first-of-type,#bonav:target > a:last-of-type{display: block;}
#bonav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#bonav:target > ul{display: block;}
#bonav > ul > li{width: 100%;float: none;}
#bonav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#bonav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}
#bonav li ul{position: static;padding: 1.25em;padding-top: 0;}
#bonav li ul{background-color: #f8f8f8;}
#bonav > ul{background-color: #f8f8f8;}
#bonav li ul a{border-top: 1px solid #f1f1f1;}
#bonav > ul > li > a{border-top: 1px solid #f1f1f1;}
}
/* foulscode.com */
</style>