Перейти к содержимому



Помогите с меню - переделать в выпадающее

#1 lepota

lepota
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 28 Ноябрь 2017 - 13:23

Подскажите пожалуйста. Есть горизонтальное меню, надо сделать выпадающее

<li><a class="menu-link" href="/">Главная</a><img src="{THEME}/images/menu.png" alt="" />
 <li><a class="menu-link" href="/">Вторая</a><img src="{THEME}/images/menu.png" alt="" />

есть стили меню и выпадающего меню

/*Меню - футер*/
.footer{border-bottom:2px solid #BDBCB8;}
ul#footer-m {list-style-type:none; margin:0; padding:0px 0px 0px 20px;}
ul#footer-m li a{ display:block; line-height:15px; text-decoration:none; color:#434343;}
ul#footer-m li a:hover{ color:#91606E; text-decoration:underline;}
.f-m{ float:left; width:140px;}
.foot {color:#999;padding:10px;}
.foot a {color:#999;font-weight: bold;}
.foot a:hover {color:#91606E;}
/*Выпадающее меню*/
.menu{height: 45px;position: relative;z-index: 1000;width:1024px;float: left;}
.menu-link{display: block;height: 35px;font: bold 11px Tahoma;color: #fff;line-height: 35px;padding: 0 10px;float: left; text-transform:uppercase; text-decoration:none;}
.menu ul{margin: 0;padding: 0;}
.menu-link:hover{color: #fff;}
.activ{color: #dddddd;}
.menu li{list-style-type: none;float: left;position: relative;height: 40px;z-index: 1000;color: #999999;line-height: 35px;}
.hidden-menu{display: none;background: url(../images/bg-hidden-menu.jpg) 0 0 repeat;position: absolute;top: 35px;left: 0px;width: 140px;z-index: 100;padding: 10px 0 20px 18px;border-radius: 0 0 5px 5px;-mos-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;}
.menu-h{display: block;width: 120px;height: 30px;font: bold 12px Tahoma;color: #fff;line-height: 30px;padding: 0 0 0 3px;background: url(../images/hidden-line.png) 0 bottom repeat-x; text-decoration:none;}
.menu-h:hover{color:#dcdcdc; text-decoration:underline;}

прописал вот так: 
<div class="menu">
        <ul>
            <li><a class="menu-link" href="/">Главная</a><img src="{THEME}/images/menu.png" alt="" />
            <ul>
                 <li><a href="#">ссылка 1</a></li>
                  <li><a href="#">ссылка 2</a></li>
            </ul>
             </li>
</div>

Чего то не пашет. Подскажите как прописать правильно что бы выпадающее было....


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Помогите с выпадающим меню (onmouseover=P7_autoLayers(0))
  2. Переделать горизонтальное меню в вертикальное
  3. Выпадающее меню
  4. Урок (Viewport)#2 - создание выпадающих меню
  5. Помогите откорректировать размеры в выпадающем меню

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 04 Декабрь 2017 - 12:29

@lepota,
к сожалению, написанные вами правила css, не очень понятно как связаны друг с другом и с последующим html-кодом.
Потому исправить это проблематично.

Потому могу предложить вам
* либо своими словами и картинками описать то, что вы хотите увидеть в вашем меню и возможно получится это реализовать

* либо нагуглить готовое решение, благо их немало.

* либо воспользоваться ниже следующим несложным выпадающим одноуровневым меню на jquery:
Посмотреть, как оно выглядит и работает, можно тут: https://jsfiddle.net/3nyc0uud/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Drop-down Jquery Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.navi li').hover(
function() {
$('ul', this).slideDown(100);
},
function() {
$('ul', this).slideUp(100);
}
);

$('.navi li:has(ul)').find('a:first').append('<span class="arrow">»</span>');
});
</script>
<style type="text/css">
/* Полоска меню высотой 38px. Если высоту меню нужно поменять, то это следует сделать и везде ниже, где встречается "38px" */
.navi {
height:38px;
background:#69c; /* цвет полоски меню */
}

.navi ul {
float:left;
list-style-type:none;
margin:0 0 0 -1px; /* для IE8 */
padding:0;
background:#fff; /* это цвет вертикальных разделителей пунктов меню */
}

.navi ul li {
float:left;
position:relative;
margin-right: 1px; /* ширина вертикальных разделителей пунктов меню */
}

/* Меню: */
.navi li a {
display:block;
padding:0 15px;/* горизонтальные поля кнопок меню */
height:38px;
font:14px/38px Verdana, Geneva, "DejaVu Sans", sans-serif;/* тут высота строки задается равной высоте кнопки (38px), чтобы отцентровать надпись на кнопках по вертикали*/
text-decoration:none;
background:#69c; /* это цвет активных кнопок меню, он совпадает с цветом полоски меню выше*/
color:#fff;
}

/* Пункт меню при наведении курсора: */
.navi li a:hover {
background:#9cf;
color:#000;
}

/* Подменю, скрываемое по умолчанию: */
.navi ul ul {
position:absolute;
display:none;
top:38px;
left:0;
}
.navi ul ul li {
float:left;
border-top:1px solid #fff; /* горизонтальные разделители пунктов выпадающего меню */
width:225px; /* ширина кнопок выпадающего меню, выбирается так, чтобы самый длинный текст помещался в одной строке */
}

/* Символ обозначающий меню с вложением */
.arrow {
display: inline-block;
margin-left: 5px;
}
</style>
</head>
<body>
<p class="logo">Logo image or header goes here</p>
<div class="navi">
  <ul>
    <li><a href="/home/">Home</a></li>
    <li><a href="/about/">About Us</a></li>
    <li><a href="/services/">Services</a>
      <ul>
        <li><a href="/services/1/">Lorem Ipsun</a></li>
        <li><a href="/services/2/">Dolor sit amet</a></li>
        <li><a href="/services/3/">Consectetur adipiscing elit</a></li>
      </ul>
    </li>
    <li><a href="/solutions/">Solutions</a>
      <ul>
        <li><a href="/solutions/1/">Sed do eiusmod tempor</a></li>
        <li><a href="/solutions/2/">Incididunt ut labore</a></li>
      </ul>
    </li>
    <li><a href="/contacts/">Contact Us</a></li>
  </ul>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Сообщение отредактировал yury: 04 Декабрь 2017 - 12:39

  • 1


Оформление форума – IPBSkins.ru