Hello Reader Belated happy new year,This year I've come back with New menu for blogger.It will be hidden until u hove left side of ur screen.
For Live Demo hover on left side of ur screen.
How Add This To Your Blog
Add below Code Before ]]></b:skin> Tag:-
.hiddenmbs-menu { background: #000; bottom: 0; list-style: none outside none !important; margin: 0 !important; padding: 20px 0 0 !important; position: fixed; top: 0; transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; width: 76px; opacity:0; } .hiddenmbs-menu.left {left: -60px;} .hiddenmbs-menu.left:hover {left: 0;} .hiddenmbs-menu.right {right: -60px;} .hiddenmbs-menu.right:hover {right: 0;} .hiddenmbs-menu:hover { right:0; opacity:1; } .hiddenmbs-menu > li { background-position: 50% 10px; background-repeat: no-repeat; cursor: pointer; height: 84px; position: relative; text-align: center; } .hiddenmbs-menu li > a { color: #FFFFFF; display: block; font-family: "Segoe UI",arial,helvetica; font-size: 11px; line-height: 1.2 !important; padding: 61px 0 10px; text-decoration: none; } .hiddenmbs-menu > li.home { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJSWwTtthxx4oMPJhmHuOwuqQuDwqBf7e4i4mZWL8XKgc0H_RaupUKGT13YlBL3-dS6x5Ddyb2aviy8Xr0rwMYUehiwwNzQRTKUjvrnvjuvwuGu18CwjEqPZn-yB5WlXAVK8s46Z7St1x/s1600/home-icon.png"); } .hiddenmbs-menu > li.portfolio{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoMSfggdYcHawEa06Iv3Wq3f9hwQCthvFLr_JwWmR1uY196YQT8D7A3pfGYHX0ygBoouXlymVx9LjcZZpuUqgyIDjEi6bOlDChMKgzSNYFoW7NQhIGJ7PaRAHLaZR4HT6VHTLUKmtc4VP/s1600/portfolio-icon.png"); } .hiddenmbs-menu > li.blog{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNRfGXP7GL7C1Yew4kxTMLrnVEV1M2eLky3IQmKuxYnwsU5K-JyqWyYLPZOD5wGuJu2GH8Lp3_S_L1sXxelf1RkKMwLhM4Jhy5mCWmgfdXWCzCZ5tLBg7FqYMC9940R8Rmms4jSRgh0M-Y/s1600/blog-icon.png"); } .hiddenmbs-menu > li.about{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilw7-6IftYcXSVVV868QacOmn8QRR20VX_yUGtszCiFjWyjfeNVvWvZhTr8MTDOvATRaOV1R2WyuWDLlI7lvUSc34yRNhSPbpHGE4QYRuMP2qAXXT-DlAgJcQ6DA5gyCQvcNDH-_wJYIl/s1600/about-icon.png"); } .hiddenmbs-menu > li.contact{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDwND3us2MsFOwtrSaECYsvcaaccL2FhRkBb3hb6WJOQpRLhDwGWdyrx77RrkAey7MnV_Fvz4u8cZXNev7TUi0_Zx9DIxh45YRqxTjsnJpiJ1rGgRbU2t6_YwFvserSAM6fPmDVEkNmT7p/s1600/contact-icon.png"); } .hiddenmbs-menu > li:hover { background-color: #232323; }
Add Below Code After <body> Tag :-
<ul class="hiddenmbs-menu left">
<li class="home"><a href="#">Home</a></li>
<li class="portfolio"><a href="#">portfolio</a></li>
<li class="blog"><a href="#">blog</a></li>
<li class="about"><a href="#">about us</a></li>
<li class="contact"><a href="#">contact us</a></li>
</ul>
From Author-
If You have any problem You can Kindly Drop Comments Below.
No comments:
Post a Comment