Разное

Выпадающее меню на css вертикальное: Вертикальное меню на CSS с выпадающим подменю по клику на плюсик

12.09.2023

Конструктор меню — как задать свой стиль для пунктов меню + вертикальное выпадающее меню?! — Вопрос от Николай Сергеевич

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация
>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16698)
  • Платные услуги (2171)
  • Вопросы по uKit (83)

Контент-модули

  • Интернет-магазин (1448)
  • Редактор страниц (237)
  • Новости сайта (501)
  • Каталоги (809)
  • Блог (дневник) (115)
  • Объявления (296)
  • Фотоальбомы (434)
  • Видео (258)
  • Тесты (60)
  • Форум (581)

Продвижение сайта

  • Монетизация сайта (222)
  • Раскрутка сайта (2466)

Управление сайтом

  • Работа с аккаунтом (5368)
  • Поиск по сайту (428)
  • Меню сайта (1771)
  • Домен для сайта (1549)
  • Дизайн сайта (13523)
  • Безопасность сайта (1493)
  • Доп. функции (1312)

Доп. модули

  • SEO-модуль (226)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (435)
  • Почтовые формы (321)
  • Статистика сайта (199)
  • Соц. постинг (214)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (435)
  • Софт для вебмастера (39)
  • Вопросы
  • Меню сайта
  • Конструктор меню — как…

Всем доброго времени суток. Возникло 2 вопроса! 

1) Как в «Конструкторе меню» — задать свой стиль пунктов? — Вот само меню — http://prntscr.com/5aeimy

Пункт №1 — Это пункт родитель
Пункт №2 — Это подпункт
Вот где и как для них прописать стили, чтобы в «Конструкторе меню»  эти квадратики перед ними автоматически появлялись?!

2) Как в «Конструкторе меню» — сделать вертикальное выпадающее меню ? Просто изначально на всех шаблонах uCoz стоит горизонтальное

  • конструктор
  • меню
  • сайта
  • дизайн-меню
  • выпадающее
| Автор: Николай Сергеевич | Категория: Меню сайта
Изменение категории | | Автор: o_Lisovenko

…

Выпадающее меню средствами только CSS

Вместо краткого введения

Довольно часто мне требуется ставить на сайты вертикальное меню. И, иногда, заказчики просят сделать так, чтобы подменю раскрывалось не как подпункт, а раскрывалось отдельным блоком правее основного меню, его подменю еще правее и так далее…

Я долго искал решения в интернете, но почему то вертикальные выпадающие меню не такие уж популярные, чего не скажешь о горизонтальных, который хоть «пятой точкой» ешь.

Так вот, в очередной раз получив запрос на внедрение именно вертикального выпадающего меню и, опять же, в очередной раз увидев, что ни каких подвижек в этом направлении в сети не делается, я решил все таки выложить в массы свой вариант реализации этой задачи.

Что мне больше всего нравится именно в этой реализации, так это то, что она не требует ни каких JS скриптов. Все реализуется на чистом CSS. Это конечно влечет за собой некоторые недостатки, самый мой нелюбимый из которых это то, что если навести на последний видимый на экране пункт меню, то подменю выпадает уже за экран. Это конечно не смертельно, ведь можно прокрутить экран колесиком, но часть потенциальных клиентов от этого все равно будет теряться. Лечится это подключением JS, но это уже совсем другая история…

К делу

Шаг №1. Сверстать обычное вертикальное меню.

HTML макет у нас будет абсолютно стандартным (ну по крайней мере большинство делает вертикальное меню именно так). А именно, это будет маркированный список, в  каждом пункте которого может быть еще один маркированный список и так далее:

Так выглядит HTML:

<html>
    <head>
        <title>Пример</title>
    </head>
    <body>
        <ul><li ><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a>
                <ul>
                    <li><a href="#">Подпункт1</a></li>
                    <li><a href="#">Подпункт2</a></li>
                </ul>
            </li>
            <li><a href="#">Пункт 3</a>
                <ul>
                    <li><a href="#">Подпункт1</a></li>
                    <li><a href="#">Подпункт2</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>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

А вот так CSS:

#sample-menu {
  margin: 0 0 35px 0;
  padding: 0;
  list-style: none;
  background: #fff;
  width: 200px;
}
#sample-menu li {
  min-height: 25px;
  border-bottom: 1px solid #aaa;
  background: #fff;
  padding: 0;
  margin: 0;
}
#sample-menu li ul {
  padding: 0;
  margin: 0 0 0 10px;
}
#sample-menu a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 7px 5px;
}
#sample-menu a:hover {
  background-color: #e6e6e6;
}
Получается как то так:

Шаг2.

Допилить стили

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

Для этого мы немного дополним уже написанные CSS стили, а так же добавим несколько новых:

#sample-menu {
  margin: 0 0 35px 0;
  padding: 0;
  list-style: none;
  background: #fff;
  width: 200px;
}
#sample-menu li {
  min-height: 25px;
  border-bottom: 1px solid #aaa;
  position: relative;
  background: #fff;
}
#sample-menu a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 7px 5px;
}
#sample-menu a:hover {
  background-color: #e6e6e6;
}
#sample-menu ul {
  z-index: 10;
}
#sample-menu li ul {
  font-size: 8pt;
  display: none;
  position: absolute;
  top: 10px;
  left: 190px;
  width: 200px;
  background: #fff;
  border: 1px solid #aaa;
  padding: 0;
  margin: 0;
}
#sample-menu li ul.open,
#sample-menu li:hover ul.open {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 10px;
}
#sample-menu li:hover ul {
  display: inherit;
  z-index: 30;
}
#sample-menu li ul li {
  padding: 0 10px;
  border-bottom: 1px solid #aaa;
}
#sample-menu li:hover ul ul {
  display: none;
}
#sample-menu li:hover ul li:hover ul {
  display: inherit;
}
#sample-menu li ul. open li:hover ul {
  z-index: 50;
}
В итоге мы получаем вертикальное меню, приемлемого качества:

Напоследок хочу заметить, что этот CSS написан для 3-х уровневого вертикального меню. Если в вашем меню более глубокая вложенность, то вам нужно будет дополнить CSS по примеру 3х последних строк моего CSS, т.к. если забыть расставить z-index’ы, то ваши пользователи могут столкнуться с неприятной проблемой, когда раскрытое подменю будет перекрывать собой выпадающее.

Вертикальное раскрывающееся меню при наведении с помощью CSS и HTML

 

В этой статье объясняется, как создать вертикальное раскрывающееся меню с помощью CSS и HTML.

 

Вы часто видите сайты, содержащие строку меню, которая раскрывается при наведении курсора и выглядит действительно великолепно, но обычно это горизонтальные раскрывающиеся меню. Эта статья поможет вам создать вертикальное раскрывающееся меню.

 

Вывод будет примерно таким:

 

 

Теперь мы увидим процедуру создания такого выпадающего меню.

 

Шаг 1

 

Прежде всего, добавьте таблицу стилей и форму или HTML-страницу.

 

Затем на HTML-странице или в веб-форме .NET добавьте «Div» и назовите его «divMenu».

 

После создания Div нам нужно добавить список элементов и еще один список в этих элементах, поэтому окончательный код будет примерно таким:

  1.     
    2.     
    •     
    • Дом1    
    •     
            
      •         
      • Homea
        •     
      •         
      • Домашняя страница
        •     
      •         
      • Homec
        •     
      •     
          
    •         
      •     
    •     
    • Дом2    
    •             
            
      •         
      • Home
        •     
      •         
      • Дом
        •     
      •         
      • Homef
        •     
      •     
      •     
    •     
    • Дом3    
    •             
            
      •         
      • Homeg
        •     
      •         
      • Хомэ
        •     
      •         
      • Хомэй
        •     
      •     
      •     
    •     
    • Дом4
      •     
    •     
    • Главная5    
    •             
            
      •         
      • Homej
        •     
      •         
      • Хомек
        •     
      •         
      • Гомель
        •     
      •     
      •     
    •     
    • Главная6
      •     
        

Шаг 2

 

Прямо сейчас ваш код представляет собой не что иное, как этот:

 

 

Итак, чтобы он выглядел красиво и интересно, мы внесем изменения в таблицу стилей, которая у нас была. добавлено ранее.

 

Добавьте этот код в свою таблицу стилей:

  1. #divMenu, ul, li, li li {  
  2.     маржа: 0;
  3.     заполнение: 0;
  4. }  
  5.    
  6. #divMenu {  
  7.     ширина: 150 пикселей;
  8.     высота: 27 пикселей;
  9. }  
  10.    
  11. #divMenu ul  
  12. {  
  13.      line-height: 25px;
  14. }  
  15.    
  16.     #divMenu li {  
  17.         стиль списка: нет;
  18.         должность: родственник;
  19.         фон: #641b1b;
  20.     }  
  21.    
  22.         #divMenu li li {  
  23.             стиль-списка: нет;
  24.             должность: родственник;
  25.             фон: #641b1b;
  26.             слева: 148 пикселей;
  27.             верх: -27 пикселей;
  28.         }  
  29.    
  30.    
  31.     #divMenu ul li a {  
  32.         ширина: 148 пикселей;
  33.         высота: 25 пикселей;
  34.         отображение: блок;
  35.         text-decoration: none;
  36.         text-align: center;
  37.         семейство шрифтов: Georgia,’Times New Roman’, serif;
  38.         color:#ffffff;
  39.         border:1px solid #eee;
  40.     }  
  41.    
  42.     #divMenu ul ul {  
  43.         позиция: абсолютная;
  44.         видимость: скрыта;
  45.         верх: 27 пикселей;
  46.     }  
  47.    
  48.     #divMenu ul li:hover ul {  
  49.         видимость: видимый;
  50.     }  
  51.    
  52.     #divMenu li:hover {  
  53.         цвет фона: #945c7d;
  54.     }  
  55.    
  56.     #divMenu ul li:hover ul li a:hover {  
  57.         цвет фона: #945c7d;
  58.     }  
  59.    
  60.     #divMenu a:hover {  
  61.         начертание шрифта: жирный;
  62.     }

Здесь я использовал идентификатор

, другими словами «divMenu».

 

Теперь все изменится, и ваш результат будет совершенно другим и интересным.

 

Вывод

 

html — Выпадающее меню CSS (как разместить подменю в вертикальном положении)

Задавать вопрос

спросил

Изменено 5 лет, 9 месяцев назад

Просмотрено 306 раз

Что не так с этим выпадающим меню, мой вопрос в том, как поместить подменю в вертикальное положение, как стилизовать и отключить всплывающее подменю, я пробовал с float:none; пожалуйста помоги???????????

 .cf:до,
.cf: после {
    содержание: " "; /* 1 */
    дисплей: таблица; /* 2 */
}

.cf: после {
    ясно: оба;
}

.cf {
    *увеличение: 1;
}

навигация {
    фон: #916a31;
    высота: 2,3 см;
}

ул,
ли {
    маржа: 0;
    заполнение: 0;
    стиль списка: нет;
    плыть налево;
}

ул {
    фон: #d5973c;
    высота: 2см;
    ширина: 100%;
}

ли а {
    дисплей: блок;
    высота строки: 2em;
    отступ: 0 1em;
    цвет: #fff;
    текстовое оформление: нет;
}

ли а: наведите {
    фон: #916а31;
    высота: 2см;
    верхняя часть обивки: . 3em;
    положение: родственник;
    верх: -.3em;
    радиус границы: .3em .3em 0 0;
}

.текущий,
а: hover.curent {
    фон: #ad9b7f;
    цвет: #еее;
    верхняя часть обивки: .3em;
    положение: родственник;
    верх: -.3em;
    радиус границы: .3em .3em 0 0;
    нижняя граница: .3em сплошной #917f63;
}


ул.подменю {
    поплавок: нет;
    фон: #916a31;
    ширина: авто;
    высота: авто;
}

ul.submenu li {
    поплавок: нет;
}

ul.submenu li a {
    нижняя граница: 1px сплошной белый;
    заполнение: .2em 1em;
    пробел: nowrap;
}

ul.submenu li:последний ребенок a {
    нижняя граница: нет;
} 
 <навигация>
    <ул>
        
  •  Главная 
    • 
        
  •  Новости
            
        
    • 
        
  •  О нас 
    • 
        
  •  Контакт 
    •
    • html
    • css

    Вы можете вложить

    с помощью CSS display:none внутри другого
    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *