Помогите доработать меню на сайте

Сергей 51 · 02.02.2016

Здравствуйте форумчане!

Столкнулся со след.проблемой: есть обычное горизонтальное меню.
Нужно из него сделать выпадающее.

Но не получается преобразовать его правильно.

Вот так чтобы получилось:
Бытовые
пункт1
пункт2-->подпункт 1
подпункт 2

Вот код:

<div class="default" id="menu">
<div class="container">
<a href="#999">Бытовые</a></div>
</div>

Вот стили:

#menu {
height: 42px;
margin-top: -23px;
background: #027bb5; /* Old browsers */
background: -moz-linear-gradient(top, #027bb5 0%, #015b9b 101%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #027bb5 0%,#015b9b 101%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #027bb5 0%,#015b9b 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid

XImageTransform.Microsoft.gradient( startColorstr='#027bb5', endColorstr='#015b9b',GradientType=0 ); /* IE6-9 */
}
#menu .container {
width: 925px;
margin: 0 auto;
}
#menu a {
display: inline-block;
text-decoration: none;
padding: 10px 15px;
color: #fff;
font-size: 12.5pt;
}
#menu a:hover {
background: #161e84; /* Old browsers */
background: -moz-linear-gradient(top, #161e84 0%, #003056 101%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #161e84 0%,#003056 101%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #161e84 0%,#003056 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid

XImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */
border-radius: 7px;}
Как правильно прописать в коде ul и li (с учётом моего имеющегося, чтобы не нарушить стиль)?
Что добавить и переименовать в коде и в стиле?

BaNru · 03.02.2016

https://jsfiddle.net/BaNru/esvyghd5/

Сергей 51 · 13.02.2016

BaNru сказал(а):
https://jsfiddle.net/BaNru/esvyghd5/

Спасибо!

а не подскажите еще в след.вопросе:
Есть готовое меню.
Как сделать, чтобы при переходе по Выбранному пункту меню, он был окрашен.
Т.е. чтобы цвет на нём зафиксировался, и не пропадал, пока не переду в другой пункт.

Вот ссылка сразу для онлайн правки: https://jsfiddle.net/to20go61/
Там и html и css стили.

BaNru · 13.02.2016

Такое только на JS.
Можно конечно извратиться и без JS, то это будет не семантично и избыточно.
Такое делается обычно добавлением класса, будь то это серверная реализация (её используются всегда, если надо переходы между страницами) и на JS, как в данном примере.
Сам скрипт я написал с использованием jQuery.
https://jsfiddle.net/to20go61/1/

А вот такое категорически не стоит делать:

<strong><a href="#3"><span style="color:#ffff00;">Акции%</span></a></strong></li>

Если надо раскрасить элемент, то используем классы и стили. Почему - будет ясно в примере, когда кликните по ней, ибо не трогал код этот там.

Код:

<a href="#3" class="action">Акции%</a>

Код:

.action {
  color:#f00;
  font-weight:bold;
}

Сергей 51 · 13.02.2016

BaNru сказал(а):
Такое только на JS.
Можно конечно извратиться и без JS, то это будет не семантично и избыточно.
Такое делается обычно добавлением класса, будь то это серверная реализация (её используются всегда, если надо переходы между страницами) и на JS, как в данном примере.
Сам скрипт я написал с использованием jQuery.
https://jsfiddle.net/to20go61/1/

А вот такое категорически не стоит делать:

<strong><a href="#3"><span style="color:#ffff00;">Акции%</span></a></strong></li>

Если надо раскрасить элемент, то используем классы и стили. Почему - будет ясно в примере, когда кликните по ней, ибо не трогал код этот там.

<a href="#3" class="action">Акции%</a>

Код:

.action { color:#f00; font-weight:bold; }

Выделение стало работать, но вот теперь перестал работать переход по ссылкам.
С чем это связано?

BaNru · 13.02.2016

Удалить return false; в скрипте.
Он блокирует последующие действия.

Сергей 51 · 13.02.2016

BaNru сказал(а):
Удалить return false; в скрипте.
Он блокирует последующие действия.

Ой, всё заработало!

А что с цветом желтым не так?
я не увидел ничего

А вот такое категорически не стоит делать:

<strong><a href="#3"><span style="color:#ffff00;">Акции%</span></a></strong></li>
Если надо раскрасить элемент, то используем классы и стили. Почему - будет ясно в примере, когда кликните по ней, ибо не трогал код этот там.

BaNru · 13.02.2016

То, что его сложно (не значит, что нельзя) переназначить, он через стили не меняется, как остальные.
Ну и вообще, зачем вся эта лишняя цепочка тегов, когда можно сделать один управляемый класс?
А если потом ты захочешь ещё один пункт выкрасить, будешь всем такие обертки делать? А не проще просто класс добавить будет? А если потом ты захочешь сменить цвет, а у тебя будет 10 штук выделены таким образом? Проще же в одном месте будет изменить?
Подумай над вопросами и ты поймешь.

Сергей 51 · 13.02.2016

BaNru сказал(а):
То, что его сложно (не значит, что нельзя) переназначить, он через стили не меняется, как остальные.
Ну и вообще, зачем вся эта лишняя цепочка тегов, когда можно сделать один управляемый класс?
А если потом ты захочешь ещё один пункт выкрасить, будешь всем такие обертки делать? А не проще просто класс добавить будет? А если потом ты захочешь сменить цвет, а у тебя будет 10 штук выделены таким образом? Проще же в одном месте будет изменить?
Подумай над вопросами и ты поймешь.

да не, поменять что не сложно.
Просто вы сказали, что там с цветом что то, а в итоге всё осталось прежним.

А как сделать так, если нажимаю на подпункт меню, то и основной пункт меню подсвечивался?
Т.е. при переходе Каталог-->бытовые, Каталог тоже подсвечивался.

Сергей 51 сказал(а):
То, что его сложно (не значит, что нельзя) переназначить, он через стили не меняется, как остальные.
Ну и вообще, зачем вся эта лишняя цепочка тегов, когда можно сделать один управляемый класс?
А если потом ты захочешь ещё один пункт выкрасить, будешь всем такие обертки делать? А не проще просто класс добавить будет? А если потом ты захочешь сменить цвет, а у тебя будет 10 штук выделены таким образом? Проще же в одном месте будет изменить?
Подумай над вопросами и ты поймешь.

Нажмите, чтобы раскрыть...

да не, поменять что не сложно.
Просто вы сказали, что там с цветом что то, а в итоге всё осталось прежним.

А как сделать так, если нажимаю на подпункт меню, то и основной пункт меню подсвечивался?
Т.е. при переходе Каталог-->бытовые, Каталог тоже подсвечивался.

т.е человек понимал бы, что он в разделе Каталог находиться.

BaNru · 13.02.2016

https://jsfiddle.net/to20go61/3/

Сергей 51 · 13.02.2016

BaNru сказал(а):
https://jsfiddle.net/to20go61/3/

а где вы внесли изменения?
чтобы знать что на сайте исправить

BaNru · 13.02.2016

В скрипте

Сергей 51 · 13.02.2016

BaNru сказал(а):
В скрипте

Отлично!
Спасибо! Очень помогли!

как здорово что есть такие люди как вы!

Помогите доработать меню на сайте

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

BaNru

Пацифизжу

Сергей 51

New Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей