MENU VERTICAL

MENU   VERTICAL

 

                                                       HTML                                     CSS

<div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>MENU</span></a> <ul> <li><a href='#'><span>MENU</span></a></li> <li><a href='#'><span>MENU</span></a></li> <li class='last'><a href='#'><span>MENU</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>MENU</span></a> <ul> <li><a href='#'><span>MENU</span></a></li> <li class='last'><a href='#'><span>MENU</span></a></li> </ul> </li> <li class='last'><a href='#'><span>MENU</span></a></li> </ul> </div>    @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); @charset 'UTF-8'; /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family: 'Open Sans', sans-serif; font-size: 14px; position: relative; } #cssmenu { width: 250px; border-bottom: 4px solid #656659; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #cssmenu a { line-height: 1.3; } #cssmenu > ul > li:first-child { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); border: 1px solid #45463d; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #cssmenu > ul > li:first-child > a { padding: 15px 10px; background: url(pattern.png) top left repeat; border: none; border-top: 1px solid #818176; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-family: 'Ubuntu', sans-serif; text-align: center; font-size: 18px; font-weight: 300; text-shadow: 0 -1px 1px #000000; } #cssmenu > ul > li:first-child > a > span { padding: 0; } #cssmenu > ul > li:first-child:hover { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); } #cssmenu > ul > li { background: #624ff0; background: -moz-linear-gradient(#624ff0 0%, #3820ec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #624ff0), color-stop(100%, #3820ec)); background: -webkit-linear-gradient(#624ff0 0%, #3820ec 100%); background: linear-gradient(#624ff0 0%, #3820ec 100%); } #cssmenu > ul > li:hover { background: #5541ef; background: -moz-linear-gradient(#5541ef 0%, #2d14e9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5541ef), color-stop(100%, #2d14e9)); background: -webkit-linear-gradient(#5541ef 0%, #2d14e9 100%); background: linear-gradient(#5541ef 0%, #2d14e9 100%); } #cssmenu > ul > li > a { font-size: 14px; display: block; background: url(pattern.png) top left repeat; color: #ffffff; border: 1px solid #2b13df; border-top: none; text-shadow: 0 -1px 1px #1e0d99; } #cssmenu > ul > li > a > span { display: block; padding: 12px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.has-sub > a span { background: url(icon_plus.png) 96% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span { background: url(icon_minus.png) 96% center no-repeat; } /* Sub menu */ #cssmenu ul ul { display: none; background: #fff; border-right: 1px solid #a2a194; border-left: 1px solid #a2a194; } #cssmenu ul ul li { padding: 0; border-bottom: 1px solid #d4d4d4; border-top: none; background: #f7f7f7; background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec)); background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%); background: linear-gradient(#f7f7f7 0%, #ececec 100%); } #cssmenu ul ul li:last-child { border-bottom: none; } #cssmenu ul ul a { padding: 10px 10px 10px 25px; display: block; color: #676767; font-size: 12px; font-weight: normal; } #cssmenu ul ul a:before { content: '»'; position: absolute; left: 10px; color: #624ff0; } #cssmenu ul ul a:hover { color: #624ff0; } 

                                                                              jQuery

$('#cssmenu > ul > li > a').click(function() { $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } });

       BAIXAR IMAGEM 

• pattern.png
• icon_minus.png
• icon_plus.png

Posted in: MENU