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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 69 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #5

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 30 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #7

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография torix
    #9

    torix
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Фотография Developer
    #10

    Developer
    Очков активности: 21 1 тема, 11 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 22.09.2018
Топ 5 участников по репутации


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

#1 lepota

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

Отправлено 28 November 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

#2 yury

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

Отправлено 04 December 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 December 2017 - 12:39

  • 1



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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