Cool and awesome Widget CSS Menu vertical Slider Menu with tutorial
Slider Fixed Sticky That Scrolls Widget menu vertical
I am here today for your blog to be an automatic top-down , to create a menu teach beautiful . The menu bar on the left side of my blog . This is a menu for your template CSS and Java / HTML Widget be added .
Please Login first Dashboard your blog . After Go to> Template Click Edit HTML
Click the in the template body anywhere . Press Ctrl+F from Keyboard.
Type the Search Box ]]></b:skin>
Paste CSS code Above in the Body
.main-nav {
position: relative;
margin-top: 25px;
z-index: 10;
}
.divider-menu {
height: 5px;
margin: 0 30px;
}
.divider-menu span {
display: block;
height: 5px;
}
.menu-icon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDRLBDkUCHGjHPD1iqnU8bLV27M002QqI-Rnryz50PgT7vKrvPK7LEzuovxGkDZORnNwJh4Kjso0My74-WgM8J04diisRwP1cWn8lN16i9_B66Ob2vXlJVqX5FKYw0VvDkK5jvPQuwn22/s1600/menu-icon.png) no-repeat scroll 17px top transparent;
color: #FFFFFF;
display: block;
height: 30px;
left: -47px;
padding-top: 20px;
position: absolute;
text-align: center;
top: 8px;
width: 47px;
display: none;
}
#main-menu {
position: relative;
z-index: 10;
zoom: 1;
margin-bottom: 20px;
}
#main-menu li {
border-bottom: 1px solid #eaeaea;
background: #F6F6F6;
margin: 0;
list-style: none;
margin: 0 0px;
position: relative;
z-index: 10;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-left: 5px solid #FB8630;
}
#main-menu li a {
color: #454545;
display: block;
font-family: 'Oswald',sans-serif;
font-size: 16px;
font-weight: 300;
padding: 10px 0 15px;
text-align: center;
text-shadow: 0 0 1px #DDDDDD;
line-height: 20px;
}
#main-menu li a:hover, #main-menu >li.current-menu-item a {
color: #0088b2;
}
#main-menu li:hover {
background: #FCFCFC;
color: #ccc;
border-left: 5px solid #bada55;
margin-right: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-webkit-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
}
#main-menu li:hover a, #main-menu li:hover + li a, #main-menu li:hover + li {
background: none;
}
#main-menu li ul {
display: none;
background-color: #fafafa;
right: -200px;
min-width: 200px;
padding: 0;
position: absolute;
top: 0px;
margin-top: 0;
z-index: 10;
zoom: 1;
box-shadow: 0 0 3px #ddd;
-moz-box-shadow: 0 0 3px #ddd;
-webkit-box-shadow: 0 0 3px #ddd;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul li {
border-right: medium none;
float: none;
margin: 0;
background-image: none;
}
#main-menu li ul li a {
background-image: none;
}
#main-menu li ul li:first-child {
border-top: none;
}
Save template
Related Post
Make Blogger Sidebar Fixed Sticky That Scrolls with Menu
Next>>
Then Click the layout add New gadget HTML/Java script
ad below Code in the Gadget
<span style="font-weight:bold;"></span><nav class='main-nav'> <ul id='main-menu'>
<li><a href='Your Site addr'><span style="font-weight:bold;">First Page</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/p/message-of-admin.html'><span style="font-weight:bold;">Author</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/search/label/Download'><span style="font-weight:bold;">Download</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/p/lon-in.html'><span style="font-weight:bold;">Sign Up</span></a></li>
<li><a href='https://www.blogger.com/home'><span style="font-weight:bold;">Log In</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/p/site-map.html'><span style="font-weight:bold;">site Maps</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/search/label/PDF%20Book'><span style="font-weight:bold;">PDF Book</span></a></li>
<li><a href='http://toneysoftblog.blogspot.com/p/contact-me.html'><span style="font-weight:bold;">Admin Contact</span></a></li>
<li><form action='/search' id='search' method='get'> <input name='q' placeholder='Search..' size='15' type='text'/> </form></li>
</ul> <div class='divider-menu'><span/></span></div> </nav> <div class='clear'/> </div>
