Здравствуйте ! есть меню в котором должно выводиться подменю пример в картинке. но такого не получается...
Тут css код для 1 меню как его сделать для доп меню?
CODE ( html):
скопировать код в буфер обмена
<ul id="nav"> <li id="selected"><a href="#">Меню1</a> <li><a href="#">Подменю1</a></li> <li><a href="#">Подменю1</a></li> <li><a href="#">Подменю1</a></li> </li> <li><a href="#">Меню2</a> <li><a href="#">Подменю2</a></li> <li><a href="#">Подменю2</a></li> <li><a href="#">Подменю2</a></li> </li> <li><a href="#">Меню3</a></li> <li><a href="#">Меню4</a></li> <li><a href="#">Меню5</a></li> </ul>
подключается 1 js для анимации:
CODE ( javascript):
скопировать код в буфер обмена
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.spasticNav.js"></script> <script type="text/javascript"> $('#nav').spasticNav(); </script>
вот стили:
CODE ( html):
скопировать код в буфер обмена
#container { width: 1200px; margin: 100px auto; } ul, li { margin: 0; padding: 0; } #blob { background: #0b2b61; border-right: 1px solid #0059ec; border-left: 1px solid #0059ec; position: absolute; z-index: 1; top: 0; background: -moz-linear-gradient(top, #0b2b61, #1153c0); background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px #011331; -webkit-box-shadow: 2px 3px 10px #011331; } #nav { position: relative; background: #292929; float: left; } #nav li { float: left; list-style: none; border-right: 1px solid #4a4a4a; border-left: 1px solid black; } #nav li a { color: #e3e3e3; z-index: 2; position: relative; cursor: pointer; float: left; font-size: 30px; font-family: helvetica, arial, sans-serif; text-decoration: none; padding: 30px 45px; }
Прикреплено изображение (Нажмите для увеличения)
|