Menu is always important for a blog, for its navigation, seo and specially for its look. A blog with a clear navigation is liked by visitors and search engines too, therefore bloggers use to add a neat and clean menu in their blogs so that visitors may not get confuse and their blog navigation is seo friendly. Moreover menu also plays a vital role in a blog's look, as bloggers are in competition with each other for traffic and good look so everyone wants a unique and impressive design for his blog.
To design a unique blog everyone tries to add whether a unique widget, a unique template, unique effect and sometimes menus also. Although horizontal menus are mostly used in blogs and websites but now adays vertical menus are also used in many blogs. In blogger there is no option for adding a menu so bloggers use to search for menus on Google and tries to add them but its not easy so I thought to share almost every type of menu to help those bloggers who are beginners to blogging and don't know how to add a menu in blogger. In this tutorial I am going to show you how to add Stitched Ribbon menu in blogger. You can see a screenshot of stitched ribbon menu above, I will share this menu in 6 different colors, hope you like it. To add this menu in your blog follow below steps:
Step 1: Go to blogger and log-in to your account.
Step 2: Go to layout and click on add a gadget.
Step 3: Scroll down to Html/javascript and click on it.
Step 4: Select a style and Copy the code:
Style 1(Stitched blue Ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<style>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAPElEQVQImYWOwQkAIAwDj2zsfM7hPOejCAUFf01zbcKYK0LUCEFKYzyzhK4bX97Ni7X357Vfr6xz37vpBp6xRxdc29qIAAAAAElFTkSuQmCC);
background-image: -webkit-linear-gradient(top, #71bbd5, #4aa8c9);
background-image: -moz-linear-gradient(top, #71bbd5, #4aa8c9);
background-image: -o-linear-gradient(top, #71bbd5, #4aa8c9);
background-image: linear-gradient(#71bbd5, #4aa8c9);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #98cee1;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #338dad transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAwCAYAAAD6g+EuAAAFf0lEQVR4Xp2WXUxcRRSA51yWhaUgoKlJNUasT/qgDyYmJiY1qTYmvEiDLa1BTfCvlkLVF3xSCS+NaWyMMZo08amGxlhaI7srpKmGalIjNUIptQAtwPK7BYFd9kJ373jmf253IQsDJ/Oz937nZ87MufBB98BfhJC9KEskzwYoNI/nHErJM9h3oZSTHC9RfICaCad65tesEbXEEUD6LEoEOaWMRDVHNNBzQOEDA+EK5ZrUABIAJ/4YoTOra8SjHoNcRtS+L158MkW22Y53XxcKlOWP3leMmoApex4lcrx7ILRNtvJHhCWWSBE37bGp9I7uwS7SvH0FikMcpmFqxRUKAbUBsF/34PxCUxcq2BZYiGNPKBUhAnDY/CVcOXes61pwS3Br4DAitVxxMx6pKg/xOcrLuIQKBoL5w82fY+Uyl8lll6QyGfkYb9WopL3xl/w8sDKTOJ61v1RqiKECvm6yvIYSpqA/mEdYNMeRWK3Nk0KpWKuqYHvAATUegTNHo/0Fm9OpNtbxqO/syhNoFtbSbA9KpLu0Fvsz70evFWxsOUgdKlsk1LsnnZjicUxT924Gx/rYH0Ql3x2J5PYAn2Mi4cSAkKrBVFkvFOgNBgDW16MhpzeMuslzkzrWWCnQYfKEUp6mIDb5zXcj/VkKZPjUrQhyd7EHYBABknPsfTegm8ngJocUpOGdcJ9PASWgn3VUrHHCxR875ZFxeGLJxU3O4FhnV8Pb4b6v7ffM8dcbxWASShRNh0Z6w2FkfDklxsw6EYojb3X2nZIv6dD47xY+MqFAJXzsUft3/4Y/VlHC9wCfbW7o/Ocktc5IwdOH3/vUX7AkaLNLCcx4R2GA7NwRJP+5aQZ8DgHFKBf1rehZ5nvaQlO6qFmRLpuQjS+JerC7Ej0QCdGCuDaGhDd++ht7u6KDstOM/HU/q/qDPTLha3WosthYqQ+TZ6w1SawPnPGAd1YyUKFBpaJpfijPEg30eG+8Ue8WFQB5YmcZuT9UyAGr8blvEPNJwKNACMj4ghUearkJMkTiWekh8LXiAJDHK0uxDqRwU++SxbGh7zubD55lhxleO39Vee2P5UZrHEr12lMPlmHeu2SJgceH28NNB76VgNuOfTpNFtj3uykk5v7xZ8tiah3BIz9Y4PHD53tvQ11HL82dA3Ye+H0rDQZIcj2t31meuPVjuKn2KwVG5igbOFamGMuVqD8K8uQiGA/N7ooSteEIHrXBE3XnekcFC0jAy76Hs4+kdXlVIXhoIckNWond6og0varBqGykruOq5jnaOq5Ox1TO7dtS9EOLCZLEyrQ8NXYhcqz2S0maZGBipa/H4OYggO/QSBzvK0OFei257pGVqbGfo437T1ngYTk21wcFZnmu+4Pq0vdAKEgeLgvpw5OYmQhHGveflKyYAisxJ55brouFMRlMKu4qLSI34isCPD0Zjh595XPJmULwUM4vLhBjh6olrg3Ekfb0zYjgBFYeShKzsWi00Qe+mbM8m30y1d/Oil1lxUIZylrGI8m5WPTiR4cUeNqAs8W+hxytSS48hODK4oCuGIn56S4GTrurngT/m+9XbkBlimrlRQEyGE/yuK3OT3Vd+vDQCQmeUeBN4WrPAEjACgn/H7yTIBn0KxWfuWSDUSR4cxFsFPEJTbHIhnQaphG1ysF1bRI8y8CUp1N+eJV4AXZPBBxHH++1hdnffvWDb+QNtssAgwMAubmQ4DP3zjyCD7RK8NwWwSa6cuAMLyZ46qQW4z09H7/eZoEHDTh/sT+ooPrsFeouxHsut9S3ri0tpBEwj3K9uv1PywYgAFT4S2UPVuWG3HWr4JG9Nft+b6n/zA++YkyG7FLiH5tmuwmyxr4g53EG5p5toW0WOScP8Lbb/yWlseJoPWlNAAAAAElFTkSuQmCC) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Style 2(Stitched pink ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAN0lEQVQImY2MsQ0AIAzDrNzKZzzDV2agQxekTlFiK5y1g0QNEDT6Emqv7pB//yTSfAk0f8DBKBeQp0niRT0BVwAAAABJRU5ErkJggg==);
background-image: -webkit-linear-gradient(top, #c864a3, #b8418c);
background-image: -moz-linear-gradient(top, #c864a3, #b8418c);
background-image: -o-linear-gradient(top, #c864a3, #b8418c);
background-image: linear-gradient(#c864a3, #b8418c);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #d58ab9;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #92346f transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAwCAYAAAD6g+EuAAAFaklEQVR4Xq2VbWiVZRjHf/ez03TzjGltBlmQq/zWpyCKgrIogrCQAqs01akQCUGf+pSgk3BqSmhIGlaiGJEhhJrAdKnO0I9lrmpL517Uve949n7/W/N+nquz1nSjSx53n+ec5/e/7uu6/vfjzq7cex54Fujif44I9AjimKAYBIhxQ8r5WghEckOynxlcIPSok44g0oGRwBRfOHAxwUTQWLBQeChVOGcWvc2daFiP4zgCPP/YrsW9TDHOlu8FBwgiAem5pQiQeBLpyI/lXxYw9QAJAdGNhg6G+gaQFespiSNnV0xVQGA1F9nLHThAEjh3UwAO1UxFQPElIlC8xgnSZSW4CBDPIR2sWf5F/qTYii8RWctBiOG+QWaUlQZ5XkAcrFk2GQGbx8i24cEzWqLh7ACymXwROHDmdgWkxAMRkhkg/Ms2dELYGlGEpIVIB2qWfn5LAclmP1KMlRVMmBvTc0twkQNpoWDfmbf25DFhmHMjSeAVwA55B97kR3ow2mQASa8i9p1eMoGAD8l5EbkkWxAe5BGgsIMbl9pGBeJpkrQI2HN68X8J2O4jKe6nwI9/SGX+bAcJH/fAa4nwuyeouTUUgc176LhkIsSlg6IHSojyIvAsO/XmZ2MFrG8iZC6BNdQE7Lug4a0HCET5qTdMwNiyhmJwW9sOsPXNEg33DyQQSeWnXt/9icFDUl5ESHFWxg5NNaiJgCdT3x6TcJFD4u2Tr+3eZqljDpWEB4Rlbk4jN3sPyulBKYwK6N0fFn26BZsYsz9h3uN6KV6bsZA9iJ1FQ6MCURTh5N7D60P5MOcJwGOiyYSACOEB7wlWQPLgRaa+Fd83QPrBEshzCN4HVUjgTryyUzhwkJDkTMgCHBZywVTOnnMOsHvromBZK3XYhR0BpiKE/cZGFgLUC2HP2rT4cR7wILyJ+VwvCCGJvGkpZj48h/y70iDRmu3cKc/alCTAIdneJIUtO5wHOatXTq28yCvMp2jebLIN7fS336Cuq3F/edWGr4D741PR4N5bub1PqoO3xssT/oPieXeTudRGf1uG+s6mAyPgXYRwVS/vEOOEA6S4SQ45gQBn3+Egf2Yhgx1Z6nuav15xvCJ26uURbp2remm7DBeINi22tlvkp6czmOlL0rjU0/zN8uMV2xPwgh11draYzSH3iLFSCPCQXzSd9EOliR8udTcZGBqqFmyvk4TM/uZGCYyuHBEh0mWldNdeRRKXu1u+XX5iQwKW9IeE2V+SsSxllPPXJ7vrqm1hqKePK5lrh5ZXV3wcwFf+BideECBIEZQshMasppWk6WvLgGAo009j9vp3S0+s34aBf8fGM2lTxNgyAMj8OH0EXHjvrMRYjTdaD4+Aw+lHYwBbmLlICbOvA+yzcHIUzJlJ589NSNCUvX54afX6TQHTJOk3xoQd244U3sYtdqtDCIeAzp+a8YODtPS2HR0D/pXxQpZsRKKkRLXgnpmJI/3AAC3ZtqOrT1XG4Obxwf8+siPlzLhjxn2zyL9zBgo2bOntOLb6dOWm3uF+H8C1TBTGC6eirNN3FBfQeaEpgNtHwBs3BnDLxGArbRwRANjrreNCMxoc5lpvx/HVZyoTMHBLsDU01FyIorLS+EYCXnVmY0UAXwVqZSlxu2VJFT84G5fKIxZs7e+sXlVTaWC4eNtgwGGmTOEcXRdbAI2Au6pX1mxcF8DXJgvOrbkj1VV7FSTa+rtPrjm3tcLA/DJZMIChhTv6zGa19fWcXHP+o3UdAz1DwHXgwtH5W4QTDhdeGkIAZrIEAthnMIH9T3xw+p1zW9f+E/z9/M0y19qrZ/wwpHP2hnICBzwdhFqBC4CffI3Hj+jW4KnHX+Rk60d1mEYGAAAAAElFTkSuQmCC) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Style 3(Stitched black ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<style>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWMIDQ1l+v//PxMDAwNWGp8cMWpoZDYAkxlMDz07IIoAAAAASUVORK5CYII=);
background-image: -webkit-linear-gradient(top, #555555, #3b3b3b);
background-image: -moz-linear-gradient(top, #555555, #3b3b3b);
background-image: -o-linear-gradient(top, #555555, #3b3b3b);
background-image: linear-gradient(#555555, #3b3b3b);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #6e6e6e;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #222222 transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAwCAYAAAD6g+EuAAAFiUlEQVR4Xp1XXUhcVxCec1cDQmMIQQgk0dK6atrHkoBkwUJ21fV/VZNAArT0MYRCfclrSqCUEAiltEAL7UtLWluNUJrgS0hb0JBVpKrR2qartb/60rru3dV4TmeOc865LlFdz/LdmTN37jdz5/zdFT09PUkAOIv4F3ZrAqFgz81D51cQQ6gfUirwpAoKtSklgPZR1oZwfXZ15OxyGuVdAPGcUoaKiZhM6AtBMKWWlsy5Kvuc6O3tVYuLi7CxsUE+PyDq+/r6fNhnwzK7zEmEKytR6IgRvNxFhxLYd+NXIPLUfAoyvo99O151CgN0d2OA/XJzST26pFIpbZF4CYVCpNdhb7Cru6vgAEq5AJ6+Ch4i1Csrw+CFPHKKoam/q6vrQIH0dh55NhqPcsbP4BiEzZxqRFlQABlIXSQSnW6CctUrKipgfn4ehCvjAIoL/f39a7uRd3Z2BheRpIxtwUidT6Vc3TyPZAJ9bic6O3ctkQpAdHR07Liga2pqYG5uzqyDrzD8hTsDdza2808kEjaKp1zNOfOt8LM+hMNhfjvVLRR81tGRCO02F5UeUMk7BBtID4566tcU+L5vp5kEdR61T9rbO54ZQEpikJpHtLW18vLZW6N1wCX6dHBw8PV8h/b2dqt7OmO82J82gBtgB+pTiWiQqf9aW1vbx5DfzPNmhQZKziWSII3dRdJa1s9CuKrKcLzRmheAnpOgtISWlhZVCJoRV65c2dSbre0DfjviYzQjeXMzOhm0aNmCknUCEiDcfYL1w9Io5rhF5CgtPAmw9WAwdQdp7UoiuFzspu0S+1XV1SC8EHm+iUFuuiFTvEIlE+laackEZGebtFXVfqZlfR+qq8MgRIisb6HnO2alQzweVzujaYve9Ayfy5cvKzrRWrH+8aY4+VxHO0BjvFHFEY2NBK1rIrQj4gE7yfimTtL1GXH7bHxTv+aBdHObQPWV0s1VVy72A5bS3NHClY/9tGtDQ4MyqNeynnSH7Wz1TtLmd/XqVXXx0iVtq6ur+xDtUGQWjtu7uS904izZRl6CsnKfFSUlJXrnXFhYgOXlZVhZWfl8eHj4CwB43lN2N2Rio+tLsEQ8i3hjUtw/+dJJvbktLS9BemXlNhJ/BKbFYlEVi8VUFBEjRKMI0vNB9ij7IFg/d/6cvldbW/slALzKeAH5QETRcfsPQAHCDZvFwYOl+Pr/2f7q6urXmPH73F2IRqNPSPF42IN7ugXwKgx+1pWWHoLqqrD1X02ng8S/Rc+efQK8y3ooeRd0AUAjEATccg+HX4SZmRlQkjJODwyPjFhi9PlFuZlpZgvC0gjW2COvLNPTj6kMkMlkBkdGRt5j8yIRmyTyT3+Cy9hILtWRI0esnk6nifgbJL4VIP7ZEAbPB0+aSMpsSW6zIrWsrAwqysspBx3Qz/jfIvFN5vrdEQcqwAkXcTgbQGvCnUHl5cdhYmIKbUz88OENZvkDCeYgr7kPWnPMBUvBHqzAxI8TkM35kM1k7+UR/7TjtyKVhSWoAPGxY8fNakTiHJ2b9x4lHxniP7cn5ryUyVyQ5qKdOHGCBtBm4Pv+UDKZvIGfE5KJZ2H75pIExZkHttbDhw/D5OSkjp7NZodGR0ffZeK/diNm2DIXaVoh7J+qqalJeLr+FHK5tftBYsTeiMHtJp7g/0RmIq6vr2PGufvJ0eR1Jv6biBU22Bs7GP4i+tAvPlBsHXLZtQejY6NB4hkmLqBxWegvyvT0NChNnHswNjb2NhP/UzBx/vKfmZ0FiVxr2dz34+Pj1wPEjwslZnZX+zNnzqhTp099V1xcHOWN/mWEQDsQIiQNIiyD9yIR1CPcJ0Ssb+jo0aP1mPE1HMinALCEmKaAW4+M/TXB2VJbJmKE3G+N8+EVQFxw+x+HoQI3k2nQ1gAAAABJRU5ErkJggg==) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Style 4(Stitched light red ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAK0lEQVQImWO4mpzIxPD/PxPD//9M////Z2JgYEDlI2FS5THUMDBg10O6PABU/Fqb2xVCxgAAAABJRU5ErkJggg==);
background-image: -webkit-linear-gradient(top, #d56361, #ca3b39);
background-image: -moz-linear-gradient(top, #d56361, #ca3b39);
background-image: -o-linear-gradient(top, #d56361, #ca3b39);
background-image: linear-gradient(#d56361, #ca3b39);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #e08b89;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #a42e2c transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAwCAYAAAD6g+EuAAAFhElEQVR4Xq1Vb0yVVRh/znsvyEWpDL4JpYDVWvHF1Wa51dZS0pZJKKSClN/6UutbW5ubsw/NuVVr1VbLD83mMnNupc4vToVsCFeAi2gEAzBAJZxy4X3vxfc8Pecf58QVvJDn3cP7Ps957u93nn8c1rX7nRYAeIXkNjzg5QHCGgA8TfKwtCCSmG3nG1HqaGzyrXXrZOwKXDs/T/pJRFyG2smQoONscTADz/hbboRorLgYguFhgJCvZYAnAdj6p78/6MMiV9e7DcA0nyde+aWlOmRYh8BPkkNsseAmJCbA/cEh4L4vbUyF9hIJEexaFAGTWVSp9MQff2iQFC45mRcR30SAx7sa6hdKYMujwAWWDoZziK1aBSwSEU6vIuAviV31uQtG59zmnDRgyOVeGPhEUCp0EqhkwIlgZ5YEtrsYR/CQc9t29E4NDkLo+yo8Lu2bSA4n6rMjYIgzJKxz53bUdtNC7lIpCkOhHCOpfeaHQ+n5wBN1O9wJRdAiX44uqWJllCLPE/oWkkN0mMh9c+52CyrFVNbqHCGcCiCvtMzYqpkg2PF2JCtwRNR5Ugajo44kGOgHHsg5MNHV0Ptg5/Z7EqjfzT45cmPkbiSSNOjvt8SerEwdKd/NUVDTMxZcH9wCGxuRykemTNSgHBjzxEZDZ+22DAKJxYFEpwWckzKto1NUxm2qqE0FgQl/d0eNS2CguGrFjq1vkT7/YlpB3at5j68UtXDb9+uKn35+T+gd26rt79qrqzD72WPAZtlYJGrm4POKI0c/oMOaPZsWt/3cNCGJa3P8pSlWXgag5uD9juqqA+jUkGjRPZsKFO20ureRsaGTKwxSkF9eDlM9PYB3ww8ZwzRtfiRd2rZs1pi6GkyB20Rrhc19N8RKV4KXmycIVIoYfAKAH7NLb76BDFWxmPGWOgOGTjyCFIwj2fSbvNSZxN5/ffZGGecgl8mIbgmmDWjIdPqYAOZ2YMjd+nJUhLpEnjOueiB5xhjrCGxBbURqNnKXwLJnKyCnqFAW/3rgf0P2PSz++kY00dgA3G8GOm82GqajELZYHix98ilIDQ1Bevwf6Ll958eac+e/BYB+1S0usHkzErllT669zDTJZ5kAHugn4HHonZg4XHOuUQAr8vjGyiyGaO7LJGf5cpi+dQt6k8kjW881fqXNg/FNlX0s/toGnG8ebTy2UyMFBRBO3CGdSb0vmTxafb7pSwNMmH2ZN5H9VpicS9UWFiFa8BAsXf2E8gEOfRMTLvBQfMP6PucmIoCMS4Kbi9YSK5HjnrzSLfWBZPJYdePvM8Bk63W7LCo7T1cf3X632XUyzWCyuxvCySQMTPnHqxovfKE3rglgW3AFEzWKsZvpc6c9WlgEd8fGpEOYFMBTv1Y1XfjMAf5Lf9thg9lDZIisjQajCGKPlQDq59rU5AkCPqCx/rbAWpCLWqm0yEK5e7O+84pLIJlIAEMB7J/YfOGP/Xp7GBF7MttM/9Mw/3LRJDpzEXAn8FQKhv3g1CzgP+FeC0211O1vc6VlyYoVM+kJg4CA/VO1zRcN8IgBnhNcirmJuANcUgI5jxbO6CO+f7q2uWX/VBhyDXx1TmC3oCbnSlOHzXlkuUwFAoeRIDhdezH+qQYenRfYLRRy+fK0rk8PkOxKAE7fhVE/dcYFJrk/sNsSBjy/rNzma3oaRoPgTE1L6z4NfF0AI63ssG2Ko/mry4FFc8Gk50YqfbamNe4CXzHAWYODmVDm0Uhflrab6fTZra3xvRr4xsKArZg7NTp59aqcqLF0+nzdpfZ9DnD34oDRXjjN617AmykCbmvfOz5NlaQASC43v7gW4Z6zSzbn2kPjwzDT7bfn1jTVtXXsyQD+/0vSvqyVMQFMwheahrmWlwH8ANe/iT+0Ts8daFYAAAAASUVORK5CYII=) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Style 5(Stitched emerald ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAQUlEQVQImV2NsQ3AMAzDCN3atX/mK3aI6xjZZEgmedcTMWiEiFEDdXc2ytju/uTdn61h8KQ4xbidzfkd/cfI7fwABsNToh7mpNgAAAAASUVORK5CYII=);
background-image: -webkit-linear-gradient(top, #6dc864, #4cb841);
background-image: -moz-linear-gradient(top, #6dc864, #4cb841);
background-image: -o-linear-gradient(top, #6dc864, #4cb841);
background-image: linear-gradient(#6dc864, #4cb841);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #90d58a;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #3c9234 transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,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) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Style 6(Stitched yellow ribbon):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<style>
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
}
#cssmenu a {
display: block;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px;
}
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(#ffffff, #f5f5f5);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px;
}
#cssmenu li:last-child,
#cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none;
}
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAAA3NCSVQICAjb4U/gAAAAOUlEQVQImW2NsQ0AIAzDrNzG/5zAKWaApZQpUmI5rDkCRrlpwCARy4aerrCX04+nOpsH+t/raX9G2cbUSAenCqufAAAAAElFTkSuQmCC);
background-image: -webkit-linear-gradient(top, #dfcf44, #cdbb23);
background-image: -moz-linear-gradient(top, #dfcf44, #cdbb23);
background-image: -o-linear-gradient(top, #dfcf44, #cdbb23);
background-image: linear-gradient(#dfcf44, #cdbb23);
position: relative;
left: -8px;
width: 170px;
}
#cssmenu li.active a {
border: 1px dashed #e6da70;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#cssmenu li.active:before,
#cssmenu li.active:after {
content: '';
}
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #a1941c transparent transparent;
}
#cssmenu li.active:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAwCAYAAAD6g+EuAAAFhUlEQVR4Xq2We4iVVRDAZ769evclQlD1X2ZB5lYGYmQvLSuCrHwSkWa5AihA0N9BsRgRIkhECAX9VRhRIYSKAmJLUrLuUpq6d+/uXV1d1121Ft37/s40853nvVzaB81yOOfMOfc3szNzzncw1/dCDwCs4TYJ/7NEALScAI5yW0ggQkkjAyCtcnOv9XoK9oeDSDoEepzbYSBq1xQETIhkAR5ExE33gNxMh6IP9oik5jXfB5XiJVbEK0EMAL606LFjBZijcJiN36A9T7cuMVN8mpWHc31rWubI9rFSBFGpMAgqzgPZyBGt4nY41/v8nA0QKh1z4bEBZxQxUa3i0cGhvlkb8Hky1eKVoGB+20OA2MRaepF1Pw71Pjd/VmzhSdNwn10RVZ1KckCgZM/LrGIDq2dugKz3BJGAUeyRbmUOURzndZVp/SusPjB4ekYGbMX7mHvHjYF81m1CHbn1YiDbs2p6A9ZRIBtzf2AAw39PcrBUkiyT9Yj0Tbbn2aZp8un6yJSgt6ikD7RxXpKs1xVsQoL/NkCGRyYsYFC1hvTGUmGg5hwooDe4/zrb80xjA+jvi4hIWY9l7sAISk8VQHlqwK0hMFPRVlL0VUPHlXcxchUfxh6VMGUcnFyVzJs5RDoH8M7AqafqDBiU2R+5MLjgaA5aMKkgUQSx4nPQ1mF3dtYbQFAJgHTMCRQFaHOVktGFY+lKU1lQ8RSAv3o7M6ee/MJ5HpR2pHsTc+ut7RU5jylwoJgfsGN9DhTt7P995T6oi0HkTVFgtrZXxhUKdGT2ptuXAkSRjN/r/+2JvT4C4jl5T0E3PyfyQFc9FJ4yUKrId1GHBEEY7zPsEx0BBXj+5ApqUKwGiGZIobpeuIIeBIyaoXj7LHNjUX3M7QM8x3Cs+eB6pggRgln3SmcaTZ5Cf9wvu/Dcr8up3uvw5yHOr9cLebrndEX++tULNl5Etsb13C8re0j8HdLUCm0LV8C89N0J59p4ZT+vf5iyVREeFCDvHdWvu+RjYgCb2qC5/WEuzxxUy+OQGSx8u37b+e8YsMiUogObafhn12seS+7kti54hMFZqJbGYGCwcIDBX4KRpl3b7/kIAsEZPBtCUXGBwdchO1z8ft22C/uN+tLZ7mU5PNO9jJBqU4INUkhmhEgQpRaCqky6jYPDxR9e39r/uQUzc0iYkY2hd6ruUMnYmVIJuKW9wz3bsrlCCB4588ujQ4YpcAtQ7lr1BjyUTG5a+Mot3DqT7M1dLP607u2MAxPRINOcQykNMAqsDQiKzk0xSWL+1h/J82N4pHTwta2Zzwz4soCDkkp+G1mv3AIDDNFVaSp9lyvBuHIbLo6Ufn51S2ZfAM56H5ULWSQsBPKHpe7ySvHBSLcsTsYo2RotHVq7JbPXsK44cJh8pQ2kQJA8QrdSU80MXgT5yT5xhcHlQ2vfyu4xnFEGDzR8FKHuI8v0B8XDZS5geYFdvlo+UgfOQAOxVzgqMF9/4CYz0jFLN99rDBGDC3BltHxkc+eQBV8V8DQHTXsefvgBGNy6mC+gO60CroyVj27ekduTLyhlwP3TPKEdMMLgDhFJzb8Dbk/2JvDRqwzuzH1qwGMGPC2bXJ2TP/AymvqnN/majE1Ujm/aMezA3Bg8CyGT0Jb2Jf5Jp6owNl45vvHd4d0GfE3AxDIjZvj1b1mwFLAprZ8rQpqonNi4vQZ8QYNnKLZadClGXG5/ilY8PrFh+8UuAx6fNVgE/QUS5W/9BYqqMHGj2r1l16XdAfj8rMECDS4+PH3sfrp+I+5+c+dI182/4yoDJridO33sAQo+6C5sokQe+0X/adSVZ3pEiCZuxifrwb1sUINIAxOytPBxr6EovQWG55v0b1eDlusC5qZmH4bGEk0Pnrv8C/Kxx0N+5KjOAAAAAElFTkSuQmCC) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1;
}
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis;
}
</style>
Step 5: After copying the code of desired menu paste it in Html/javascript code.
Step 6: Click on save and you are done.
As you see that the arrow of menu is in right direction therefore you have to add this menu in left side of your blog and for that you have to customize your blog's layout style because if you are using simple template then there is no option for adding widget in left side of blog. Blogger has many styles for both body layout and footer layout and you can change it easily but if you don't know how to change layout style in blogger, simply read below steps to change layout style of your blog:
Step 1: Go to blogger and log-in to your blogger account.
Step 2: Click on template and customize it.
Step 3: On the customization page click on layout.
Step 4: Choose anyone of five layout styles highlighted in below image having options to add gadget on left hand side:
Step 5: Click on apply to blog on top right side of customization page.
You can change footer style also but we don't need it for menu, so if you personally want to change it simply select it and save changes.
Customization:
This menu is designed with pure CSS(it is coded by CSS and Html only). Its too simple so you can't further customize it and it doesn't need customization because it looks nice without customization. But if you have knowledge about CSS then you can change its tabs colors, but I suggest you not to customize it or else it won't look good. Simple changes that you can make in this menu is adding more tabs like about, sitemap etc or renaming existing tabs. You can add, remove or rename a new tab in this menu by making changes in below piece of code(this code is in the beginning of every menu code):
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Company</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
To add a new tab paste <li><a href="#"><span>Tab name</span></a></li> between <ul> and </ul> highlighted in above code.
To remove a tab remove same piece of code shown above, for example if you want to remove products tab then remove <li><a href="#"><span>Products</span></a></li> from above piece of code
To rename a tab just change the name below <li><a href="#"><span>Products</span></a></li> for example if you wan to change name of product tab then replace it with the name you like.
That's it! enjoy.
Final words
I hope you like this post and this menu is working in your blog, I would like to know your experience. If you have any problem regarding this post feel free to ask me in comments or contact me. If you like this post take a second to share it with others. Thank you for visiting 101Helper. Follow and subscribe to get instant news about blogger gadgets, menu, templates, seo, tips, tricks and tutorials.
Search tags: Menu for blogger, vertical menu for blogger, how to add menu in blogger, stylish menu for blogger, how to customize menu in blogger, Stitched Ribbon menu for blogger, vertical menu for blogger blog, Simple menu for blogger, 101Helper blogger menus.
EmoticonEmoticon