skip to main
|
skip to sidebar
Conhecimento
Início
Home
terça-feira, 14 de janeiro de 2014
MENU VERTICAL
09:11
Unknown
No comments
MENU VERTICAL
HTML CSS
Home
MENU
MENU
MENU
MENU
MENU
MENU
MENU
MENU
@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
Postagem mais recente
Postagem mais antiga
Página inicial
0 comentários:
Postar um comentário
Subscribe to our RSS Feed
Follow Us on Twitter
Be Our Fan on Facebook
Videos
Tags
Blog Archives
Tecnologia do
Blogger
.
Marcadores
Aula de CSS
Aula de HTML
Como criar um site para celular
MENU
Arquivo do blog
▼
2014
(29)
▼
janeiro
(29)
Aula 12 de CSS
Aula 11 de CSS
Aula 10 de CSS
Aula 9 de CSS
Aula 8 de CSS
Aula 7 de CSS
Aula 6 de CSS
Aula 5 de CSS
Aula 4 de CSS
Aula 3 de CSS
Aula 2 de CSS
Aula 1 de CSS
Aula 14 de HTML
Aula 13 de HTML
Aula 12 de HTML
Aula 11 de HTML
Aula 10 de HTML
Aula 9 de HTML
Aula 8 de HTML
Aula 7 de HTML
Aula 6 de HTML
Aula 5 de HTML
Aula 4 de HTML
Aula 3 de HTML
Aula 2 de HTML
Aula 1 de HTML
MENU VERTICAL
Menu
Como criar uma site no wapka para celular
Categories
Aula de CSS
Aula de HTML
Como criar um site para celular
MENU
0 comentários:
Postar um comentário