Регистрация за 5 сек.
Здравствуй, друг!
Еще не зарегистрировался?

Войти за 5 сек. через :
Как сделать вертикальное меню на CSS - Forum-Profit.RU
Finmaxfx

Как сделать вертикальное меню на CSS

Специалист
Сообщений: 271 Карма: 3.10
#1    21.09.2015, 15:38
Вот вам просто код, чтобы сделать вертикальное меню с помощью одних стилей. Ключевым элементом стилей стало white-space: pre; для div меню.
Код html
Код HTML:
<a href="/">
<div class="men" style="min-height:270px;">
г
л
а
в
н
а
я
</div></a>

<div class="men" style="min-height:270px;"><ul><li><a href="/">
д
и
з
а
й
н
</a>
<ul>
<li><a href="/">1) гостиная</a></li>
<li><a href="/">2) спальня</a></li>
<li><a href="/">7) кабинет</a></li>
</ul></li></ul>
</div>

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

н
а
с
</div></a>

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

в

д
и
з
а
й
н
е
</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="/">
<div class="men">
у
с
л
у
г
и

и

ц
е
н
ы
</div></a>
<a href="/">
<div class="men">
а
р
х
и
т
е
к
т
у
р
а
</div></a>
Ну и самое главное - стили:
Код:
.men {
color: #fff;
white-space: pre;
float: left;
width: 25%;
background: #ADACAC;
border: 1px solid #fff;
padding-left: 5%;
margin-right: 10%;
min-height:385px;
}

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

.men ul li a{
color: #fff;
display:block;
text-decoration: none;
width: 100%;
border-bottom: #540E0E;
}
.men ul li a:hover{
display:block;
text-decoration: none;
width: 100%;
color: #540E0E;
}
.men ul {
list-style: none;
margin: 0;
padding: 0;
}
.men ul li {
position: relative;
}
.men 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;
}
.men ul li ul li a:hover {
display: block;
border: 1px solid #E23131;
background: #ADACAC;
padding: 5px;
text-decoration: none;
border-radius: 8px;
}
.men li ul {
display: none;
left: 35px;
position: absolute;
top: 0;
}
.men li:hover ul {
display: block;
text-decoration: none;
}
Можно еще много чего допиливать, но оно работает :) Спрашивайте.
Работоспособность можно посмотреть на jsfiddle - jsfiddle.net/prolisk/eoydxdun/1/

Вот так это может выглядеть:
Мой блог вебмастера.
Kwork - Это удобный магазин фриланс-услуг по 500 Р. SEO, дизайн, текст - все услуги по 500 Р. Быстро, качественно и с гарантией! Заходи на Kwork!
Слушай и качай музыку бесплатно тут.
Специалист
Сообщений: 475 Карма: 47.70
#2    16.05.2016, 18:50
Думаю парится не стоит, главное определиться с дизайном таблицы и выбрать цветовые гаммы, которые легко можно настроить под свой вкус. В интернете пачками выложены коды с примерами. Бери не хочу. Мне по душе больше флеш меню, только далеко не у всех они будут корректно работать или вообще работать не будут, это у кого как говорится смотря руки от куда растут.
Интересующийся
Сообщений: 27 Карма: 3.50
#3    13.06.2016, 14:27
Цитата:
Сообщение от striker161 Посмотреть сообщение
Мне по душе больше флеш меню
Фу! Флеш заметте именно вам по душе, но не как не для пользователей. Не слушайте....
Много пишешь о себе, помогаешь ФСБ
Любитель
Сообщений: 55 Карма: 5.70
#4    23.07.2016, 01:18
По-моему это выглядит ужасно. Не могу представить вариант, где бы такое меню выглядело хорошо.
Интересующийся
Сообщений: 14 Карма: 0.60
#5    25.08.2016, 05:20
Даны исходники, с ними и работайте, подводите под свои нужды.
Или вы хотели: прекрасный код и устраивающий вас вид?
Так а руки для чего?
И поверьте, вам не понравится идеальный вариант - у всех вкус и цвет разный!
Профессионал
Сообщений: 583 Карма: 63.30
#6    18.09.2016, 17:06
Не вижу никакого смысла делать такое меню. Да, порой может понадобиться расположить текст вертикально для какой-нибудь боковой кнопки, но делать таким образом меню - это ужасно. За работу, конечно, спасибо, но код у Вас оставляет желать лучшего. Если все же необходимо сделать нечто подобное, то для экономии места в блокноте лучше воспользоваться простенькой функцией на javascript:
Код:
$(document).ready(function() {
  $('#vertical').val('t\ne\nx\nt');   
});
Такой код будет более читабельным, а также менее геморным.
Про табличную верстку, о которой говорил @striker161 , я и вовсе молчу. Сейчас все верстают div-ами, таблицами же пользуются в том случае, если необходимо отрисовать таблицу. Нет необходимости захламлять код, нужно всё делать как можно более компактно и понятно для себя и тех программистов, которые будут обслуживать сайт в будущем.
Монеты - это свидетели истории, но сделать их своими собеседниками и узнать нечто интересное может только человек любознательный, настойчивый и трудолюбивый

Bitcoin и Ethereum - покупаю Биткоин и Эфириум здесь по самому выгодному курсу
Интересующийся
Сообщений: 10 Карма: 1.10
#7    26.04.2017, 10:58
Не могу особо представить надобность использования данной менюшки
Рекомендуем посмотреть
Похожие темы
Новое меню для сайта для Ucoz
http://imglink.ru/pictures/28-12-10/6c866393e88783a32cd13b1c7211c6a5.jpg Установка: Вставити в блок код знизу <tr>** <TD...
Категории раздела в виде меню
http://s09.radikal.ru/i182/1002/19/56e28895e683.jpg Вот только что раскопал старенький скриптик. Пригодится тем, у кого стоит светлое меню. вот...
Страница: Коллекция GUI (Меню для КС) + установка
http://afree.at.ua/GUI.png Как установить? Заходим в Панель управления (ПУ), дальше "Редактор страниц", дальше в правом углу сверху нажимаем...
Новое меню Diz-cs
http://radikal.ua/data/upload/05615/ba193/586706071b.png Вставляем в блок: <ul class="bnav"> <li><a href="/" title="Главная...
Красивое горизонтальное меню для ucoz
http://nncity.ucoz.com/_ph/4/822276527.gif Установка: 1. Скачать 2. Копируем код, и вставляем между <head> и </head> <style...


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)