X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Вертикальное меню с выпадающим списком
prolisk
prolisk
Topic Starter сообщение 15.2.2015, 21:54; Ответить: prolisk
Сообщение #1


Написал код как сделать вертикальное меню на css и дописал выпадающий список. Такое решение может пригодится для большинства сайтов, где много пунктов меню, а место ограничено. Код не сложный, внедряется легко. Как меню будет выглядеть в конечном итоге, можно увидеть по ссылке ниже
[spoiler="Код css:"]
.menop {
color: #fff;
white-space: pre;
float: left;
width: 25%;
background: #ADACAC;
border: 1px solid #fff;
padding-left: 5%;
margin-right: 10%;
min-height:385px;
}

.menop:hover {
background: #FCD3D3;
border: 1px solid #FAF71D;
color: #540E0E;
}

.menop ul li a{
color: #fff;
    display:block;
text-decoration: none;
    width: 100%;
border-bottom: #540E0E;
}
.menop ul li a:hover{
    display:block;
text-decoration: none;
    width: 100%;
    color: #540E0E;
}
.menop ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menop ul li {
  position: relative;
}
.menop ul li ul li a {
  display: block;
  border: 1px solid #000;
background: #ADACAC;
  padding: 5px;
  text-decoration: none;
color: #fff;
        margin: 0;
    padding: 5px;
    border-radius: 5px;
}
.menop ul li ul li a:hover {
  display: block;
  border: 1px solid #E23131;
background: #ADACAC;
  padding: 5px;
  text-decoration: none;
    border-radius: 8px;
}
.menop li ul {
  display: none;
  left: 35px;
  position: absolute;
  top: 0;
}
.menop li:hover ul {
  display: block;
text-decoration: none;
}
[/spoiler]

[spoiler="Код html:"]
<a href="/koro/">
<div class="menop" style="min-height:270px;">
г
л
а
в
н
а
я
</div></a>

<div class="menop" style="min-height:270px;"><ul><li><a href="/koro/dizajn/">
д
и
з
а
й
н
</a>
<ul>
<li><a href="/">1) гостиная</a></li>
<li><a href="/">2) спальня</a></li>
<li><a href="/">3) ванная</a></li>
<li><a href="/">4) кухня</a></li>
<li><a href="/">5) детская</a></li>
<li><a href="/">6) входная группа</a></li>
<li><a href="/">7) кабинет</a></li>
</ul></li></ul>
</div>

<a href="koro/o-nas/">
<div class="menop" style="min-height: 458px">
о

н
а
с
</div></a>

<div class="menop" style="min-height: 458px"><ul><li><a href="/koro/">
с
т
и
л
и

в

д
и
з
а
й
н
е
</a>
<ul><li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li></ul>
</li></ul>
</div>
<a href="/koro/prajs/">
<div class="menop">
у
с
л
у
г
и

и

ц
е
н
ы
</div></a>
<a href="/arhitektura/">
<div class="menop">
а
р
х
и
т
е
к
т
у
р
а
</div></a>
[/spoiler]

Пример - http://jsfiddle.net/prolisk/eoydxdun/1/
Прикрепленный файл  789.png ( 379,96 килобайт ) Кол-во скачиваний: 1173


Юзаем, спрашиваем, благодарим ;-)


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
melrok
melrok
сообщение 16.2.2015, 1:24; Ответить: melrok
Сообщение #2


Это точно оригинальное меню :D 80% сайта занимает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
Topic Starter сообщение 16.2.2015, 1:41; Ответить: prolisk
Сообщение #3


Pixsel, заказчику не прикажешь :laugh: Сам захотел, чтобы так и было, просит еще больше.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1452 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 3398 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 1128 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 4633 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
0 SPiar 4812 28.9.2017, 17:45
автор: -korotkov-


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:58
Дизайн