Горизонтальное выпадающее меню на css: Горизонтальное выпадающее многоуровневое меню

Содержание

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

отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ).

Было очень сложно редактировать css и html, потому что я просто скопировал и вставил AND, смешал два разных источника css из cssdeck.com, чтобы создать одно навигационное меню.

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

Но….. Я снова застрял с подменю.

На этот раз я хочу сделать подменю горизонтальным, которое затем будет иметь другую ширину от навигационного меню. Я использовал white-space: nowrap, чтобы сделать подменю горизонтальным, но теперь подменю исчезает, как только я перемещаю мышь близко к следующему навигационному меню.

Кроме того, я не могу заставить навигационное меню оставаться на месте, когда появляется подменю.

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

помощь… пожалуйста..?

html

css

Поделиться

Источник


Frances Park    

26 февраля 2015 в 13:39

2 ответа


1

Поскольку подменю заданы как display: block , элементы на странице обтекают их, когда они появляются. Чтобы исправить это поведение, вам нужно добавить position: absolute в подменю. Если элемент расположен абсолютно, другие элементы на странице будут игнорировать его, а не обтекать его. Подробнее о позиционировании и о том, как оно влияет на поток страниц, читайте здесь .

Подменю исчезают, потому что вы применили margin из 10px к оболочкам подменю. Удалите это поле, и ваше подменю останется на месте, как и ожидалось.

Я также заметил, что вы добавили white-space: nowrap в подменю «About» ul, но не в другое подменю ul с. Вот JSFiddle с примененными исправлениями .

В более широком смысле, ваш HTML/CSS остро нуждается в некотором TLC:

  • Обертки div вокруг ваших ul s являются избыточными. Просто используйте сами ul s.
  • Использование таких классов, как li_first и li_last , не нужно, потому что мы можем выбрать первых/последних детей с псевдоклассами :first-child и :last-child .
  • Используйте универсальные классы вместо IDs, например .submenu вместо #subAbout , #subServ и т. Д.

Применение вышеприведенных идей устранит любое дублирование или ненужную специфику в вашем коде, к чему вы должны стремиться. Ваш CSS будет составлять часть длины, гораздо больше readable/maintainable/debuggable, и вы не столкнетесь с такими проблемами, как забывание добавить свойство white-space , упомянутое выше.

Поделиться


Chloe Reimer    

26 февраля 2015 в 15:05


0

Вот способ сделать это:

https://jsfiddle.net/Team_Exitium/34ueyguh/11/

вот живой пример:

https://jsfiddle.net/Team_Exitium/34ueyguh/11/embedded/result/

HTML:

<body>
    <nav>
        <ul>
            <li><a href="">Home</a>

                <ul>
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
            <li><a href="">About</a>

                <ul>
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Service</a>

                <ul>
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

CSS:

    body {margin:0;}

nav {width: 100%;height: 40px;}

#top-ul {height: 25px; margin:0;}
li {

    float:left;

    padding-right:55px;

    list-style-type:none;

}

a {

    font-family:"Unica One", "Noto Reg", sans-serif;

    font-size: 1.5em;

    color: #393939;

    text-decoration:none;

}

.sub {

    position:absolute;

    display:none;

    background-color: #c6342e;

    top: 35px;

    padding-left: 5px;

    font-family:"Noto Lgt", sans-serif;

    font-size: 12pt;

    border-radius:8px;

}

.sub a {

    color: #fff;

}

.sub a:hover {

    background-color: #d46762;

}

.sub li {

    padding-right: 25px;

}
.main {margin-top:5px; height:35px;}
.main:hover > ul {

    display:block;

}

Поделиться


jonas kjellerup    

26 февраля 2015 в 16:53

  • как сделать горизонтальное выпадающее меню со многими иерархиями /sub-sub?

    как сделать выпадающее горизонтальное меню, как на веб-странице parkour generation , но с подменю(когда я навожу курсор на подменю, появляется подменю с горизонтальным меню). в park our, как вы можете видеть в classes -> outdoor, есть подменю, но меню находится в вертикальном положении. то, что…

  • Горизонтальное Выпадающее Меню Hover

    Я устал строить горизонтальное выпадающее меню из этого tuts и демо Я хочу, чтобы меню выглядело так : Я хочу, чтобы подменю появилось в правом Родительском меню, http://alistapart.com/article/horizdropdowns#snippet4 Следующий шаг-это подменю. Мы хотим, чтобы каждое подменю появлялось справа от…

Похожие вопросы:

Горизонтальное подменю вертикальное меню с помощью Bootstrap

Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…

горизонтальное меню с горизонтальным подменю

Я пытаюсь сделать горизонтальное меню с горизонтальным подменю. Я пробовал что-то , но это не сработало : приведенный выше код должен был отображать горизонтальное главное меню, при наведении…

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

У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…

ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…

Asp.Net Горизонтальное Подменю

Как создать asp:Menu, который имеет горизонтальное подменю, а не вертикальное, сохраняя при этом верхнее меню горизонтальным?

как сделать горизонтальное выпадающее меню со многими иерархиями /sub-sub?

как сделать выпадающее горизонтальное меню, как на веб-странице parkour generation , но с подменю(когда я навожу курсор на подменю, появляется подменю с горизонтальным меню). в park our, как вы…

Горизонтальное Выпадающее Меню Hover

Я устал строить горизонтальное выпадающее меню из этого tuts и демо Я хочу, чтобы меню выглядело так : Я хочу, чтобы подменю появилось в правом Родительском меню,…

Горизонтальное меню с вертикальным подменю

Мне нужно горизонтальное меню с вертикальными подменю , которые взяты из базы данных сервера SQl, мне нужно вертикальное подменю с полосами прокрутки, может кто-нибудь дать мне ссылку на такое меню.

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

Я хочу создать горизонтальное выпадающее меню, например: Home Menu 1 Menu 2 Menu 3 Menu 4 Sub Menu 11 Sub Menu 12 Sub Menu 13ssssssssssssssssssssssssssssssssssssss Sub Menu 14 И каждое подменю будет…

Как создать вертикальное главное меню с горизонтальным подменю

Как создать вертикальное главное меню с горизонтальным подменю. Пункт 1 Пункт 2_ Item2_1 Item2_2 Item2_3 Пункт 3 Пункт 4 Таким образом, как я могу создать такое меню?

Горизонтальное выпадающее меню держит moving…how могу ли я заставить его оставаться на месте?

Я нуб выпадающего меню, и я, кажется, не могу понять, как удержать мое выпадающее меню от выдувания и перемещения основных кнопок. Я уверен, что это какая-то регулировка положения, но я не могу понять, где и что это такое. Вот ссылка jfiddle: http://jsfiddle.net/F4WvT/

Вот это html:

<div>
<ul>
        <li><a href="#A">HOME</a>
        </li>
        <li><a href="#B">ABOUT</a>
          <div>
                <ul>
                    <li><a href="#A">Sub Category 1</a></li>
                    <li><a href="#B">Sub Category 2</a></li>
                    <li><a href="#C">Sub Category 3</a></li>
                    <li><a href="#D">Sub Category 4</a></li>
                    <li><a href="#E">Sub Category 5</a></li>
                    <li><a href="#F">Sub Category 6</a></li>                     </ul>
           </div>
         </li>
                     <li><a href="#B">CONTENT</a>
          <div>
                <ul>
                    <li><a href="#A">Sub Category 1</a></li>
                    <li><a href="#B">Sub Category 2</a></li>
                    <li><a href="#C">Sub Category 3</a></li>
                    <li><a href="#D">Sub Category 4</a></li>
                    <li><a href="#E">Sub Category 5</a></li>
                    <li><a href="#F">Sub Category 6</a></li>                     </ul>
           </div>
         </li>
        <li><a href="#A">CONTACT</a>
        </li>
  </ul>
</div>

А еще CSS:

<style type="text/css">
#global-nav {
width: 180px;
height: 40px;
background-image: none;
float: left;
position: static;
margin-left:0px;
}

#global-nav a {
color:#000;
font-size:12px;
cursor:pointer;
display:block;
width: 200px;
height: 40px;
text-align:center;
vertical-align: central;
text-decoration:none;
font-weight:bold;
}

#global-nav ul {
background: whitesmoke;
padding: 0;
margin: 0;

}

#global-subnav ul{
background: #D3171A;
position: relative;
    width: 250px;
        text-align:center;
left: 180px;
top: -55px;
}

#global-nav li {
list-style: none;
border-bottom: none;
border-width: 0px;

}

#global-nav ul ul li {
display:none;

}

#global-nav li:hover {
background: none;
}

#global-nav li:hover ul li {
display:block;
}
</style>

Как мне заставить эти мои основные навигационные кнопки оставаться неподвижными? Хорошая карма для быстрого совета!

html

css

position

Поделиться

Источник


user3488841    

02 апреля 2014 в 10:40

2 ответа

  • Горизонтальное выпадающее меню CSS

    Я пытаюсь сделать горизонтальное выпадающее меню в CSS. Однако он появляется вертикально: Я хочу, чтобы два самых верхних пункта меню были горизонтальными. Что я могу сделать, кроме как сделать таблицу с одной строкой? ul ul { display: none; } ul li:hover > ul { display: block; } <ul>…

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

    отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и вставил AND, смешал два разных источника css из cssdeck.com, чтобы создать одно навигационное меню….


0

Вам нужно сделать вашу поднавигацию абсолютной по отношению к ее относительному родителю, который в вашем случае должен быть элементом <li> . Установка top: 0 вашего подэлемента навигации расположит его в верхней части родительского элемента, что именно то, что вам нужно.

Отредактированный пример вашего кода: this JSFiddle

Поделиться


abpetkov    

02 апреля 2014 в 10:46


0

#global-subnav ul {
background: #D3171A;
position: relative;
width: 250px;
text-align: center;
left: 0px;
top: 0;
}

Поделиться


Unknown    

02 апреля 2014 в 10:48

Похожие вопросы:

Горизонтальное выпадающее меню на сайте Adobe Business Catalyst

В настоящее время у нас есть горизонтальное меню на нашем сайте ( http://www.faa.net.au ), но я хочу расширить его, сделав выпадающее меню (до 3 уровней вниз), чтобы я мог устранить необходимость в…

центрирование <ul> <li> горизонтальное выпадающее меню

Я не смог центрировать это горизонтальное выпадающее меню списка. Придется ли мне переделывать все css, потому что я использую поплавок слева? Вот весь код, относящийся к позиции списка. или же…

css горизонтальное выпадающее меню навигации

Я пытаюсь внедрить горизонтальное выпадающее меню на свой сайт и столкнулся с несколькими проблемами: 1.I хотите, чтобы выпадающее меню отображалось постоянно, даже когда пользователь переместил…

Горизонтальное выпадающее меню CSS

Я пытаюсь сделать горизонтальное выпадающее меню в CSS. Однако он появляется вертикально: Я хочу, чтобы два самых верхних пункта меню были горизонтальными. Что я могу сделать, кроме как сделать…

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

отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и…

как сделать горизонтальное выпадающее меню со многими иерархиями /sub-sub?

как сделать выпадающее горизонтальное меню, как на веб-странице parkour generation , но с подменю(когда я навожу курсор на подменю, появляется подменю с горизонтальным меню). в park our, как вы…

Горизонтальное Выпадающее Меню Hover

Я устал строить горизонтальное выпадающее меню из этого tuts и демо Я хочу, чтобы меню выглядело так : Я хочу, чтобы подменю появилось в правом Родительском меню,…

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

Я хочу создать горизонтальное выпадающее меню, например: Home Menu 1 Menu 2 Menu 3 Menu 4 Sub Menu 11 Sub Menu 12 Sub Menu 13ssssssssssssssssssssssssssssssssssssss Sub Menu 14 И каждое подменю будет…

Измените вертикальное выпадающее меню CSS на горизонтальное

Я скачал выпадающее меню CSS с веб-сайта (purecss.menus.com). Он начинался как вертикальное меню, и при наведении курсора мыши подменю появляются справа от меню. Я изменил главное меню, чтобы оно…

Сделать выпадающее меню исчезает

У меня есть код от W3schools, в котором мы получаем выпадающее меню после нажатия на кнопку. Выпадающее меню не исчезает, когда мы нажимаем в другом месте. Я немного серфил, но это кажется…

Выпадающее меню на CSS . Горизонтальное выпадающее меню

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.

Итак приступим к написанию основной структуры сайта


<!DOCTYPE html>
<html>
  <head>
    <title> Выпадающее меню на CSS </title>
  </head>
  <body>
   
  </body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.


nav {
     margin: 50px 0;
     bacground-color: #E94f56;
    }
nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
       }
nav ul li {
           margin: 0px -7px 0 0;
           display: inline-block;
           background-color: #E94f56;
           }
nav a {
       display: block;
       padding: 0 10px;
       color: #ffff;
       font-size: 23px;
       line-height: 60px;
       text-decoration: none;
       }
nav a:hover {
             backgroung-color: #000001;
            }

Проверим то что у нас получилось.

 

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a>
        <ul>
            <li><a href='#'>История HTML</a></li>
            <li><a href='#'>Структура HTML</a></li>
            <li><a href='#'>HTML5</a></li>  
        </ul>
    </li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

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

nav ul ul {
        display: none;
        position: absolute;
        top100%;
       }
nav ul li:hover>ul {
            display: inherit;
           }
nav ul ul li {
       min-width: 180px;
       float: none;
       display:list-item;
       position: relative;
       }

Должно получиться следующее

Добавим для пункта меню с вложенным подменю соответствующий индикатор.

     li> a:after {content: '+'}
     li> a:only-child:after {content:'';}

В итоге у нас получилось следующее

 

Горизонтальное выпадающее меню CSS: особенности, пошаговая инструкция

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

Когда какие-то пункты содержат дополнительные разделы, создается несколько уровней. Это работает так: при наведении мыши на одну из секций появляется дополнительный список с подразделами. При разработке необходимо позаботиться, чтобы при просмотре страницы на маленьких экранах появлялось адаптивное меню вместо обычного.

HTML-разметка

Перед тем, как сверстать адаптивное выпадающее меню на CSS, нужно создать скелет. Задается с помощью языка разметки HTML и находится в файле с расширением .html. Начинается с <!DOCTYPE>, затем обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри документа задается тег head, где указывается мета-информация о сайте:

  • заголовок документа;
  • краткое описание;
  • кодировка;
  • файлы со стилями и скриптами.

После закрывающегося тега </head> следует тело документа, оформленное как <body>. Здесь находятся логические блоки сайта, они интерпретируются браузером и выводятся на экран в виде визуальных элементов.

Базовая разметка обычно состоит из тегов ul и li. Это семантически верное оформление, которое связано с тем, что при просмотре в браузерах, которые не поддерживают CSS, анализатор контента правильно опознает этот блок. Хотя использование стандартных div-ов также широко распространено.

Простая разметка меню без скрытых элементов и выпадающего меню на CSS выглядит таким образом:

<ul>

<li><a>Главная</a></li>

<li><a>История</a></li>

<li><a>О нас 3</a></li>

<li><a>Контакты 3</a></li>

</ul>

В теге <a> указываются ссылки на страницы, а во всех остальных – используемые селекторы.

Базовые стили

Следующим шагом создания выпадающего меню на HTML и CSS является создание каскадной таблицы стилей. Они хранятся в файле с расширением .css, где описывается внешний вид документа и различные визуальные эффекты. Здесь задаются цвета, шрифты, расположение блоков и других аспектов внешнего вида веб-страницы.

То, что здесь будет находиться, зависит исключительно от дизайна. Есть несколько основных моментов, которые следует разобрать. Поскольку создается меню, маркеры списка не должны отображаться. Они убираются с помощью атрибута list-style: none. Немаловажной частью является устранение подчеркивания ссылок. Для этого селекторы, которые отвечают за оформления тега <a>, должны содержать text-decoration: none.

Необходимо назначить действия при наведении мыши на кнопки. Для чего используется псевдокласс :hover? Используя его, пользователь видит, как меняется цвет пунктов или появляется выпадающий список меню на HTML CSS. Для скрытия некоторых элементов применяется display: none, а для появления – display: block или display: inline.

Горизонтальное размещение через float

После базового оформления пользователь заметит, что полученная структура – это вертикальное меню с выпадающим списком на HTML CSS. Для некоторых сайтов приемлемо расположение вертикального меню, но, как правило, используется горизонтальное.

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

Горизонтальное размещение через inline-block

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

Когда нужно скрыть, используется display: none. Это понадобится для появления скрытых частей меню при наведении курсора мыши. Важно отметить, что блок не просто становится прозрачным, – видимые части сайта занимают его место.

Чтобы разместить дивы горизонтально друг за другом, необходимо использовать свойство inline или inline-block. Что касается последнего, его применение имеет больше преимуществ, ведь содержит свойства как строчного элемента, так и блочного.

Свойство display используется для div-ов и тегов li списка ul.

Таким образом, чтобы создать горизонтальное выпадающее меню на HTML CSS в файле стилей в селекторах li или div, указывается атрибут display со значением inline-block.

Создание выпадающих элементов

Выпадающие элементы изначально не видны на странице, они имеют свойство display: none. Позже none меняется на block или inline-block. Это происходит при клике на один из пунктов меню или во время наведения мыши. Для создания этого эффекта и связанных анимационных переходов, используется CSS.

Должно выглядеть примерно так:

#menu ul li {

position:absolute;

display: none;

}

#menu li:hover ul {

display:inline-block;

}

Следует обратить внимание на атрибут position, с помощью которого устанавливается позиционирование элемента. Блок div при заданном значении absolute отображается над другими блоками. А отсчет координат начинается от левого верхнего края родительского элемента. В данном случае родителем считается document. Это нужно изменить и сделать родителем #menu, задать position: relative. Теперь в #menu ul нужно указать координаты left и top, чтобы выпадающий список появлялся прямо под основным пунктом и не перекрывал его.

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

Адаптивность

Ни один сайт не может считаться хорошим, если он неправильно отображается на мобильных устройствах и планшетах. Смысл создания адаптивных страниц в том, чтобы изменить оформление при достижении определенного размера экрана. Для этого используется ключевое слово @media. В значениях указывается тип носителя, максимальный или минимальный размер экрана.

Чтобы работать с этим атрибутом, нужно задать начальную ширину блока на большом экране свойством max-width: 100%. Уменьшая экран, происходят изменения с блоком:

@media (min-width: 768px) {

.container-small {

//меняем ширину пунктов меню, выводим иконку гамбургера

}

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

Использование Bootstrap

С появлением фреймворка Bootstrap верстальщикам стало намного легче создавать адаптивные элементы и строить сайт. Он позволяет прототипировать идеи с помощью готовых компонентов и мощных плагинов. Для использования базовых возможностей нужно включить скомпилированные стили Bootstrap из CDN в head сайта. Должно выглядеть так:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css» integrity=»sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″ crossorigin=»anonymous»>

Для создания горизонтального меню с выпадающим списком на CSS используется компонент Navbar. Его нужно скопировать с официального сайта. По умолчанию он имеет два режима отображения: десктопный и мобильный.

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

Другой способ создания адаптивных элементов – использование Grid системы. Ее отличие от Bootstrap в том, что можно указать любое количество колонок и сделать их разной ширины.

UberMenu

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

UberMenu – это горизонтальное меню с выпадающим списком HTML CSS, разработанное под движок WordPress. Его возможности:

  • адаптивность;
  • выпадающее меню;
  • поддержка сенсора;
  • работа из коробки;
  • гибкие настройки;
  • большой список анимационных переходов;
  • наличие фильтров сортировок;
  • автоматическая интеграция в любую тему WordPress.

Есть бесплатная и платная версия с полным функционалом стоимостью 19 долларов.

Удобство использования готовых плагинов для создания выпадающее меню на CSS в том, что все браузеры будут одинаково отображать содержимое веб-страницы. Есть одна неприятная особенность – UberMenu не умеет работать с браузером IE6. Но это не страшно, ведь сегодня среда распространения «Интернет Эксплорера» составляет менее 1%.

Max Mega Menu

«Макс Мега Меню» – это отличное решение для создания выпадающего меню на CSS. Оно поддерживает возможность расположения меню в хедере и футере. С ним легко работать, он поддерживает функцию drag-and-drop. Все, что необходимо сделать для размещения кнопок меню, – мышью перенести соответствующие элементы на выбранное место.

Можно назначить любые способы, чтобы появилось скрытое субменю: навести курсор мыши на элемент или кликнув по нему. Существует много анимационных эффектов: постепенное исчезание, появление, выезжание.

Этот плагин достаточно легкий, файл javascript весит менее 2 килобайт. При создании можно использовать встроенные шрифты, иконки. Если появляются проблемы с использованием, можно ознакомиться с соответствующими мануалами.

Для начала работы достаточно добавить его в список плагинов WP.

JQuery Accordion Menu Widget

Для создания выпадающее меню на CSS можно использовать плагин JQuery Accordion Menu Widget. Он доступен для скачивания из репозитория WordPress или с официального сайта. Работает с последними версиями CMS, совместим с другими плагинами.

С его помощью можно создавать вертикальное меню. Он поддерживает стандартные функции аналогичных инструментов, но есть особенные дополнения. Например, при развертывании субменю, если за 1 секунду не было совершено никаких действий, оно самостоятельно возвращается к исходному состоянию. Другая интересная функция представляет собой отключение родительских ссылок, когда активны дочерние. Это означает, что при появившемся подменю нет возможности нажать на пункты основного.

При самостоятельном создании меню пользователь встречал ситуацию, когда элементы сразу реагируют даже при случайном наведении мыши или щелчке. Чтобы избежать такого неудобства, встроена задержка hover delay. Другая полезная функция – управление скоростью появления и скрытия подменю.

Заключение

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

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

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

Горизонтальное выпадающее меню на css

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

Смотрите также по теме:
Выпадающее меню для blogspot
Горизонтальное меню в blogger
Программа CSS Menu Generator и сервис CSS Menu Generator

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

<div>
      <ul>
        <li>
          <a href=’https://mycrib.ru/’>Главная</a>
        </li>
        <li>
          <a href=’https://mycrib.ru/’>Обратная связь</a>
       </li> 
        <li>
           <a href=»https://mycrib.ru/»>Карта блога</a>
            <ul>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 1</a></li>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 2</a></li>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 3</a></li>
              </ul>         </li>
      </ul>
    </div>

Примечание. При вставки HTML-кода меню четко следите за кавычками – ни в коем случае нельзя потерять или поставить лишнюю и сразу вставляйте код в готовом виде – со ссылками и правильно прописанными названиями пунктов меню. Для этого снечала отредактируйте код в блокноте или Notepad ++.
В примере, как вы видите показано создание списка с подкатегориями. Пример отображения такок списка-меню без подключения стилей:

  • Главная
  • Обратная связь
  • Карта блога

    Код HTML меню вставьте в гаджет HTML / Javascript элемента страницы во вкладке Дизайн. Выберите расположение. Сохраните изменения.
    Теперь наша задача при помощи стилей создать горизонтальное выпадающее меню css. Полученный код вы вставите перед кодом ]]></b:skin> в редакторе html вашего блога.
    Пример CSS для выпадающего меню:
    В код css я вставила комментарии, для того, чтобы вы смогли настроить горизонтальное выпадающее меню так, как вам нужно (изменили цвет меню, размеры и пр.)

    /*—— CSS код выпадающего меню —-*/
    #osn {
        background: #14256C; /*—— Цвет фона основного меню—-*/
        width: 290px; /*—— Ширина основного меню—-*/     color: #FFF;  
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #960100; /*—— Верхняя граница меню: ширина стиль цвет—-*/
            height:35px; /*—— Высота меню—-*/
    }
    #menu {
        margin: 0;
        padding: 0;
    }
    #menu ul {
        float: left; /*—— Выравнивание меню—-*/
        list-style: none; /*—— Отсутствие маркеров списка основного меню—-*/
        margin: 0;
        padding: 0;
    }
    #menu li {
        list-style: none; /*—— Отсутствие маркеров списка подменю—-*/
        margin: 0;
        padding: 0;
            border-left:1px solid #333; /*—— Граница левая элемента главного меню стиль и цвет—-*/
            border-right:1px solid #333; /*—— Граница правая элемента меню—-*/
            height:35px; /*—— Высота меню отдельного элемента—-*/
    }
    #menu li a, #menu li a:link, #menu li a:visited {
        color: #FFF;  /*—— Цвет ссылки элемента основного меню —-*/
        display: block;
       font:normal 12px Helvetica, sans-serif;    margin: 0; /*—— Шрифт ссылок основного меню—-*/
       padding: 9px 12px 10px 12px; /*—— Отступы ссылки от границ блока, если вы меняете отступы, то нужно изменить ширину меню и высоту основоного меню и отдельного элемента—-*/
            text-decoration: none; /*—— Отсутствие подчеркивания ссылки—-*/
           
    }
    #menu li a:hover, #menu li a:active {
        background: #97ABE3; /*—— Цвет элемента основного меню при наведении—-*/
        color: #FFF; /*—— Цвет ссылки элемента основного меню при наведении курсора—-*/
        display: block;
        text-decoration: none; /*—— Отсутствие подчеркивания ссылки—-*/
            margin: 0;
        padding: 9px 12px 10px 12px; /*—— Отступы ссылок при наведении и активных, должны быть равны отступам неактивных ссылок, если не задумано смещение при наведении—-*/ 
    }
    #menu li {
        float: left;
        padding: 0;
    }
    #menu li ul { 
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #menu li ul a {
        width: 140px;
    }
    #menu li ul ul {
        margin: -25px 0 0 161px;
    }
    #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
        left: -999em;
    }
    #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
        left: auto;
    }
    #menu li:hover, #menu li.sfhover {
        position: static;
    }
    #menu li li a, #menu li li a:link, #menu li li a:visited {
        background: #97ABE3; /*—— Цвет фона выпадающего меню—-*/
        width: 120px;
        color: #000; /*—— Цвет неактивных ссылок выпадающего меню—-*/
       display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px; /*—— Отступы ссылок выпадающего меню—-*/
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
        
    }
    #menu li li a:hover, #menu li li a:active {
        background: #fff; /*—— Цвет фона выпадающего меню при наведении на пункт—-*/
        color: #000; /*—— Цвет наведенной и активной ссылки пункта выпадающего меню—-*/
        display: block;     margin: 0;
        padding: 9px 12px 10px 12px; /*—— Отступы наведенных и активных ссылоквыпадающего меню —-*/
            text-decoration: none;
    }

    Примечание. Если вы добавляете пункты к основному меню, то вы должны обязательно сделать изменения в ширине основного меню – измените значение width: 290px. Вам также придется изменить ширину даже в том случае, если вы просто иначе назовете пункты меню. В противном случае выпадающее меню css будет отображаться некорректно. Изменяют ширину меню путем подбора:

    • если у вас получилось меню в 2 ряда, то увеличьте ширину в редакторе html – и просмотрите изменения без сохранения шаблона,
    • если в меню образовался “пустой хвост” – часть неполной ячейки, то уменьшите ширину меню.

    Если вы захотите изменить высоту меню, то вам придется поменять отступы основного меню и отдельного элемента, а также height (высоту) основного меню и отдельного элемента.
    Если у вас будут вопросы по созданию выпадающего меню, то задавайте вопросы в комментариях.

    • Опубликовано Иванова Наталья

    Смотреть все записи от Иванова Наталья

    Навигация по записям

    Выпадающее горизонтальное меню на css




    Для того, чтобы использовать выпадающее горизонтальное меню, достаточно скопировать его html-код в нужное место на вашей странице, и добавить css в ваш файл стилей.




    <ul>

    <li><a href=»#»>Меню 1</a>

    <ul>

    <li><a href=»#»>Подменю 1</a></li>

    <li><a href=»#»>Подменю 2</a></li>

    <li><a href=»#»>Подменю 3</a></li>

    </ul>

    </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>

    </ul>

    </li>

    <li><a href=»#»>Меню 3</a>

    <ul>

    <li><a href=»#»>Подменю 1</a></li>

    <li><a href=»#»>Подменю 2</a></li>

    <li><a href=»#»>Подменю 3</a></li>

    </ul>

    </li>

    <li><a href=»#»>Меню 4</a></li>

    <li><a href=»#»>Меню 5</a></li>

    </ul>




    Работоспособность данной конструкции проверена в трех основных браузерах: Mozilla Firefox, Opera, и Internet Explorer.



    Этот CSS проходит проверку по стандарту CSS3 !



    * {

    margin:0;

    padding:0;

    }

    #nav {

    font:13px verdana, arial, helvetica, sans-serif;

    list-style-type:none;

    width:100%;

    height:25px;

    display:inline-block;

    background:#A39E92;

    line-height:25px;

    }

    #nav li{

    float:left;

    width:120px;

    margin-top:-10000px;

    }

    #nav li a {

    width:120px;

    text-decoration:none;

    text-align:center;

    color:#3A3732;

    position:relative;

    float:left;

    margin-right:-119px;

    margin-top:10000px;

    }

    #nav li a:hover, #nav li a:focus, #nav li a:active {

    background:#797466;

    margin-right:0;

    color:#fff;

    }

    #nav li ul {

    background:#A39E92;

    float:left;

    margin-top:-25px;

    padding-top:25px;

    margin-bottom:-10000px;

    list-style-type:none;

    }

    #nav li ul li {

    float:none;

    margin:0;

    width:auto;

    }

    #nav li ul li a {

    float:none;

    display:block;

    margin:0;

    margin-right:-1px;

    background:#BFBCB5;

    }



    Скачать выпадающее горизонтальное меню


    Иногда работающие в IE и Firefox’е стили, неработают или работают не корректно в Oper’е и наоборот, перед тем как применить «рецепт» проверяйте его работу в разных браузерах.

    Горизонтальное выпадающее меню HTML + CSS

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

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

    Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:

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

    После того, как мы применили CSS, у нас должно получиться что-то вроде этого:

    Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.

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

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

    Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.

    И вот как должен выглядеть конечный результат:

    Приступаем к установке:

    HTML

    Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его.

    Код

    <nav>
      <ul>
      <li><a href=»#»>Главная</a></li>
      <li><a href=»http://zornet.ru»>Zornet.Ru</a>
      <ul>
      <li><a href=»#»>Стили CSS</a></li>
      <li><a href=»#»>Скрипты сайта</a></li>
      <li><a href=»#»>Шаблоны ресурса</a>
      </li>
      </ul>
      </li>
      <li><a href=»#»>Стилистика CSS</a></li>
      <li><a href=»#»>Раскрутка SEO</a></li>
      <li><a href=»#»>Дизайн</a></li>
      <li><a href=»#»>Связь</a></li>
      </ul>
    </nav>

    Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.

    Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом.

    Поэтому добавьте следующее после вышеуказанного CSS:

    Код

    nav {
      margin: 0px 0;
      background-color: #c14018;
      width: 100%;
    }

    nav ul {
      padding:0;
      margin:0;
      list-style: none;
      position: relative;
      }

    nav ul li {
      margin: 0px 0px 0 0;
      display: inline-block;
      background-color: #c1411a;
    }

    nav a {
      display: block;
      padding: 0 17px;
      color: #f5eeee;
      font-size: 19px;
      line-height: 59.9px;
      text-decoration: none;
    }

    nav a:hover {
      background-color: #69240e;
    }

    nav ul ul {
      display: none;
      position: absolute;
      top: 100%;
    }

    nav ul li:hover > ul {
      display:inherit;
    }

    nav ul ul li {
      min-width:168px;
      display:list-item;
      position: relative;
    }

    nav ul ul ul {
      position: absolute;
      top:0;
      left:100%;
    }

    li > a:after { content: ‘ +’; }
    li > a:only-child:after { content: »; }

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

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

    Позвольте мне знать в комментариях ниже.

    Демонстрация

    html — Использование CSS для отображения раскрывающегося меню по горизонтали

    Я пытаюсь использовать горизонтальный список в веб-части в SharePoint. Я просматривал этот код снова и снова и не мог найти проблему. По какой-то причине список все еще отображается вертикально. Любые идеи?

    CSS

      ul {
        отступ: 0;
        стиль списка: нет;
        ширина: 100%;
        выравнивание текста: центр;
        высота: 100 пикселей;
        фон: #ffffff центр без повтора;
    }
    ul li {
        дисплей: встроенный блок;
        плыть налево; отступ: 25px 25px 0 125px;
        маржа: 0;
        положение: относительное;
        размер шрифта: 25 пикселей; font-weight: жирный; цвет: #FFFFFF;
        выравнивание текста: центр;
    }
    ul li a {
        дисплей: блок;
        цвет: #FFF; отступ: 10 пикселей 5 пикселей;
        текстовое оформление: нет;
    }
    ul li a: hover {

    }
    ul li ul.падать{
        минимальная ширина: 150 пикселей; / * Устанавливаем ширину раскрывающегося списка * /
        ширина: 100%;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
        плыть налево;
    }
    ul li: hover ul.dropdown {
        дисплей: встроенный; / * Показать раскрывающийся список * /
        фон: #FFFFFF;
        слева: 0;
        ширина: 100%;
        маржа: 0;
        отступ: 0;

    }
    ul li ul.dropdown li {
        дисплей: встроенный;
        плыть налево;
        фон: #FFFFFF;
    }

    HTML List (все еще в процессе; просто тестирование, прежде чем я исправлю весь текст / ссылки)

    Я не занимался этим уже много лет, но мой босс хочет, чтобы я попробовал это сделать.-_-

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

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

    Я сделаю это в два этапа:

    Создание простого горизонтального меню — без раскрывающегося списка

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

    Ничего особенного. Теперь посмотрим на css:

    .

     ul # Horiznav {
маржа: 0;
отступ: 0;
тип-стиль-список: нет;
высота: 32 пикс.
}

#horiznav li {
плыть налево;
ширина: 150 пикселей
}

#horiznav li a {
дисплей: блок;
ширина: 150 пикселей;
высота строки: 30 пикселей;
выравнивание текста: центр;
цвет белый;
текстовое оформление: нет;
цвет фона: # EA9531;
граница: сплошной белый 1px
}

#horiznav li a: hover {
цвет: # 333333
}

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

  • . Этот код дает нам это:

    Добавление раскрывающегося списка

    Теперь добавим раскрывающийся список. Выпадающие элементы включены как дополнительные элементы

      , вложенные в соответствующий элемент

    • . Как это:

      Хорошо, теперь о css. Нам нужно сделать несколько дополнений — отмечено красным:

      ul # Horiznav, #horiznav ul {
маржа: 0;
отступ: 0;
тип-стиль-список: нет;
высота: 32 пикс.
}

#horiznav li {
плыть налево;
width: 152px;
позиция: относительная
}

#horiznav li a {
дисплей: блок;
ширина: 150 пикселей;
высота строки: 30 пикселей;
выравнивание текста: центр;
цвет белый;
текстовое оформление: нет;
цвет фона: # EA9531;
граница: сплошной белый 1px
}

#horiznav li a: hover {
цвет: # 333333
}

#horiznav li ul {
дисплей: нет;
позиция: абсолютная;
слева: 0;
верх: 32 пикселя
}

#horiznav li: hover ul {
дисплей: блок
}

#horiznav li ul a {
цвет фона: # FFB33B
}

      См. Пояснения в комментариях к коду.На самом деле удивительно небольшое количество css. Выпадающие списки обычно скрыты и появляются при наведении курсора на родительский

    • . Это дает нам (как и вверху страницы):

      Вы увидите, что при использовании абсолютного позиционирования раскрывающийся список появляется поверх всего остального на странице — что мы и хотим. И это прекрасно работает практически во всех популярных сегодня браузерах. В частности, я тестировал IE7, IE8, FF3, Chrome, Opera9, Opera 10, Safari4. Вы заметите, что чего-то не хватает.Никаких призов за угадание того, какой браузер вызывает дополнительные трудности…

      Работа с раскрывающимся списком в IE6

      IE6 не поддерживает: hover, за исключением элементов . Так что без лишнего кода наше красивое раскрывающееся меню вообще не будет работать в IE6. К счастью, есть решение под названием csshover, которое вы найдете здесь вместе с инструкциями по его использованию. Я лично считаю версию 2 этого программного обеспечения наиболее надежной.

      Добавление анимации с помощью jQuery

      Чтобы добавить анимацию — плавные переходы, слайды и т. Д. — взгляните на мой плагин jQuery здесь, который позволяет использовать более сложную анимацию для пользователей javascript, сохраняя при этом подход css для тех, у кого нет.

      Простое горизонтальное раскрывающееся меню

      Простое горизонтальное выпадающее меню CSS, совместимое с кроссбраузерностью, без изображений и JavaScript.

      HTML код: 

       


Меню 
 Простое раскрывающееся меню CSS

      Код CSS: 

       / * CSSTerm.com Простое горизонтальное выпадающее меню CSS * /

.drop_menu {
фон: # 005555;
отступ: 0;
маржа: 0;
тип-стиль-список: нет;
высота: 30 пикселей;
}
.drop_menu li {float: left; }
.drop_menu li a {
отступ: 9 пикселей 20 пикселей;
дисплей: блок;
цвет: #fff;
текстовое оформление: нет;
шрифт: 12px arial, verdana, sans-serif;
}

/ * Подменю * /
.drop_menu ul {
позиция: абсолютная;
слева: -9999 пикселей;
верх: -9999 пикселей;
тип-стиль-список: нет;
}
.drop_menu li: hover {позиция: относительная; фон: # 5FD367; }
.drop_menu li: hover ul {
слева: 0px;
верх: 30 пикселей;
фон: # 5FD367;
отступ: 0 пикселей;
}

.drop_menu li: hover ul li a {
отступ: 5 пикселей;
дисплей: блок;
ширина: 168 пикселей;
текстовый отступ: 15 пикселей;
цвет фона: # 5FD367;
}
.drop_menu li: hover ul li a: hover {background: # 005555; }

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

      Прошло много времени с тех пор, как я написал статью в этой категории (веб-дизайн), поэтому я решил написать статью о создании горизонтального выпадающего меню исключительно с помощью HTML и CSS.Чтобы создать простое меню, см. Горизонтальное навигационное меню CSS. Поскольку горизонтальное раскрывающееся меню использует только CSS и HTML, оно не работает с Internet Explorer 6. Вся концепция раскрывающегося меню использует псевдокласс CSS: hover, когда вы наводите указатель мыши на родительское меню, CSS “ display »изменяется на« block »и отображает раскрывающееся меню. Когда вы перемещаете указатель мыши от меню, атрибут« display »изменяется на« none », поэтому раскрывающееся меню исчезает.

      Вот полный код горизонтального выпадающего меню

       


 Меню CSS

      Обратите внимание на объявление DOCTYPE в начале, без этого код не будет работать в Internet Explorer.Посмотреть живую демонстрацию

      CSS Горизонтальное раскрывающееся меню DEMO

      горизонтальных выпадающих меню CSS — сброс CSS

      На прошлой неделе читатель CSS для новичков Андреа Плухар написала с интересной проблемой: она хотела использовать раскрывающиеся меню CSS, подобные тем, которые мы представили на прошлой неделе на создаваемом ею веб-сайте, но дизайн требовал, чтобы подменю располагались по горизонтали, не вертикально. Она прислала мне макет того, что ей нужно (отрывок выше), и поинтересовалась, есть ли способ добиться этого эффекта с помощью CSS.Оказалось, что — это , способ сделать это с помощью CSS, и в духе максимизации выгоды я подумал, что учебник будет уместным.

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

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

       #navbar {
позиция: абсолютная;
верх: 0;
справа: 0;
маржа: 0;
заполнение: 0;}
#navbar li {
стиль списка: нет;
плыть налево; }

      Затем я стилизовал основные теги привязки, чтобы они больше походили на навигацию, которую искала Андреа.Код выглядит так:

       #navbar li a {
дисплей: блок;
отступ: 3px 8px;
преобразование текста: прописные буквы;
текстовое оформление: нет;
цвет: # 999;
font-weight: жирный; }
#navbar li a: hover {
цвет: # 000; }

      Я добавил немного отступов к ссылке и использовал свойство text-transform, чтобы сделать все прописными, как в макете. Таким образом, исходный XHTML может быть в нижнем или верблюжьем регистре (первые буквы заглавными)… что было бы немного легче читать в нестилизованном документе.

      Далее мы скрываем вложенные списки по умолчанию, а затем стилизуем их при наведении курсора на содержащий элемент списка:

       #navbar li ul {
дисплей: нет; }
#navbar li: hover ul, #navbar li.hover ul {
позиция: абсолютная;
дисплей: встроенный;
слева: 0;
ширина: 100%;
маржа: 0;
отступ: 0; }

      Приведенный выше код — это бит, который действительно заставляет большую часть этого волшебства работать, поэтому я объясню важные части более подробно. Во-первых, поскольку IE6 не поддерживает состояния зависания ни для чего, кроме тегов привязки, мы пишем наши правила для учета состояния наведения и для класса наведения.Этот класс применяется к элементам, когда на них наведен курсор, с помощью небольшого хитроумного кода JavaScript (который объясняется в этом предыдущем руководстве по раскрывающемуся меню).

      Далее мы абсолютно позиционируем наши вложенные списки и с помощью свойства «left» перемещаем список в крайнее левое положение. При этом список перемещается не в крайнюю левую часть экрана, а в крайнюю левую часть его родительского позиционированного элемента , который в данном случае оказывается основным неупорядоченным списком, который мы разместили в самом начале. .Таким образом, этот трюк полагается на то, что весь список каким-то образом позиционируется, даже если он просто относительно позиционирован и оставлен на месте.

      Правило display: inline немного сложнее. Настолько, что я даже не совсем понимаю, что он делает. Что я знаю, do , так это то, что без этого правила элементы списков в подменю просто не отображаются ни в одном из основных браузеров. Я, , думаю, что имеет какое-то отношение к тому факту, что содержащиеся элементы являются плавающими (о чем мы поговорим чуть позже), но я не могу этого доказать.Если кто-то лучше разбирается в техническом аспекте, дайте мне знать в комментариях.

      Наконец, важно правило ширины: 100%. Это предотвращает сворачивание неупорядоченного списка до меньшего размера в некоторых браузерах. В частности, без указания этой ширины вложенный список иногда сворачивается до размера «содержащего» элемента списка (даже если он абсолютно позиционирован и, следовательно, технически больше не содержится). Обратите внимание, что более старые версии Opera плохо справляются со 100% шириной … если вы хотите, чтобы она работала в более старых версиях, вам нужно указать ширину в соответствии с определенным размером (например, в пикселях).Однако самая последняя версия Opera (9.27) справляется с этим нормально, и у меня складывается впечатление, что пользователи Opera, как правило, обновляются чаще, чем, скажем, пользователи IE.

      Наконец, мы просто перемещаем элементы влево (чтобы разместить их в красивом горизонтальном ряду) и даем им несколько цветов:

       #navbar li: hover li, #navbar li.hover li {
плыть налево; }
#navbar li: hover li a, #navbar li.hover li a {
цвет: # 000; }
#navbar li li a: hover {
цвет: # 357; }

      И все! Здесь вы можете увидеть рабочий пример.Это было протестировано и отлично работает в IE 6+, Firefox 2, Safari (Mac и ПК) и Opera 9.27.

      Единственная часть макета, которую я не смог скопировать, — это способ сохранить выделенным элемент основного меню, когда подменю использовалось: поскольку вложенный список абсолютно позиционирован, браузер, похоже, не считает их согласованный набор больше (кроме, кажется, с точки зрения ширины по умолчанию). Если у кого-то есть решение этой проблемы, я хотел бы услышать об этом!

      Спасибо Андреа за создание, надеюсь, полезного урока! И если у вас когда-нибудь возникнет вопрос, связанный с CSS, который, по вашему мнению, может стать здесь хорошей статьей, не стесняйтесь отправить мне сообщение через мою страницу контактов или в Twitter.Я не могу гарантировать, что воспользуюсь каждым заданным вопросом, но сделаю все, что в моих силах, если позволят время и ситуация.

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

      Введение

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

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

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

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

      Шаг 1

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

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

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

        • Home1
          • Homea
          • Homeb
          • Homec
        • Home2
          • Homed
          • Homee
          • Homef
        • Home3
          • Homeg
          • Homeh
          • Homei
        • Home4
        • Home5
          • Homej
          • Homek
          • Homel
        • Home6

    • Шаг 2

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

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

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

    1. #divMenu, ul, li, li li {
    2. маржа: 0;
    3. отступ: 0;
    4. }
    6. #divMenu {
    7. ширина: 150 пикселей;
    8. высота: 27 пикселей;
    9. }
    11. #divMenu ul
    12. {
    13. высота строки: 25 пикселей;
    14. }
    16. #divMenu li {
    17. стиль списка: нет;
    18. позиция: относительная;
    19. фон: # 641b1b;
    20. }
    22. #divMenu li li {
    23. стиль списка: нет;
    24. позиция: относительная;
    25. фон: # 641b1b;
    26. слева: 148 пикселей;
    27. верх: -27 пикселей;
    28. }
    31. #divMenu ul li a {
    32. ширина: 148 пикселей;
    33. высота: 25 пикселей;
    34. дисплей: блочный;
    35. оформление текста: нет;
    36. выравнивание текста: по центру;

      37. Семейство шрифтов

    37. : Georgia, Times New Roman, с засечками;
    38. цвет: #ffffff;
    39. граница: сплошная 1px #eee;
    40. }
    42. #divMenu ul ul {
    43. позиция: абсолютная;
    44. видимость: скрыта;
    45. верх: 27 пикселей;
    46. }
    48. #divMenu ul li: hover ul {
    49. видимость: видимая;
    50. }
    52. #divMenu li: hover {
    53. цвет фона: # 945c7d;
    54. }
    56. #divMenu ul li: hover ul li a: hover {
    57. цвет фона: # 945c7d;
    58. }
    60. #divMenu a: hover {
    61. font-weight: жирный;
    62. }

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

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

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

    Выход

    Многоуровневые выпадающие меню навигации: примеры и учебные пособия

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

    В этой статье представлено более 25 (горизонтальных и вертикальных) многоуровневых выпадающих меню , построенных с использованием Javascript и CSS , которые вы можете использовать в своих будущих проектах. Также вы найдете несколько полезных руководств в конце этого поста, которые вы можете использовать, чтобы начать создавать свое собственное многоуровневое меню навигации.

    Вы также можете проверить эти сообщения:

    Горизонтальные и вертикальные раскрывающиеся меню

    1) Раскрывающиеся вкладки (5 стилей)

    Drop Down Tabs — это горизонтальное меню вкладок CSS, которое поддерживает раскрывающееся меню второго уровня для каждой из своих вкладок.

    2) Профессиональное раскрывающееся меню

    3) Многоуровневое меню эффектов

    — это настраиваемое гибридное раскрывающееся меню javascript / css, способное создавать простые меню (как горизонтальные, так и вертикальные).

    4) Меню FastFind

    Вложенные меню jQuery, основанные на динамических ответах «AJAX». Меню также можно перетаскивать.

    5) jQuery SuckerFish

    Копирование меню Suckerfish.

    6) Необычное скользящее меню вкладок с использованием script.aculo.us

    7) Меню на основе списка с изображениями

    Это меню, основанное на неупорядоченном списке (

    • ). Это делает меню простым в использовании и дружественным для поисковых систем.

      8) Сдвинуть вниз меню

      Слайд-меню на основе неупорядоченного списка (

      • ).

        9) Выпадающее меню сделано с помощью скрипта / прототипа

        Многоуровневое раскрывающееся меню.

        10) Плагин меню в стиле Suckerfish для jQuery

        Демонстрирует двухуровневое горизонтальное меню, отображающее путь к текущей странице, когда меню находится в состоянии ожидания.

        11) Создание динамического раскрывающегося меню

        12) onMenuOpen onMenuCollapse События

        Это одноразовый эффект, который показывает, что меню открывается и запускает событие, а затем завершается другим событием.

        13) Меню Mootools с гармошкой и эффектами

        Это простое меню создает эффект наведения курсора на ссылки и открывает подменю с помощью гармошки.

        14) Безлимитное выпадающее меню Mootools

        15) Создание панели навигации Outlook

        Использование элементов управления ListView и Accordion

        16) Простое вертикальное меню CSS в стиле Digg

        В этом руководстве объясняется, как реализовать простое вертикальное меню, подобное digg, с использованием CSS и javascript для отображения / скрытия подменю.

        17) Выпадающее меню с прототипом

        Уникальное раскрывающееся меню навигации, которое рекурсивно применяет функцию к li, которая переключает видимость вложенного элемента ul.

        18) Выпадающее меню с вложенными подменю

        Использование CSS и немного JavaScript

        19) Выпадающее меню с jquery

        Пример выпадающего анимированного меню, созданного с помощью jquery

        20) jdMenu Иерархическое меню

        Плагин jdMenu для jQuery предоставляет чистое, простое и элегантное решение для создания иерархических раскрывающихся меню для веб-сайтов и веб-приложений.

        21) Плагин jQuery: Treeview

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

        22) Выпадающее меню

        23) Доступное раскрывающееся меню

        24) Скрипт двухкомпонентного меню

        В этом примере показано, как добавить сворачиваемый подуровень.

        25) Сложные динамические списки

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

        26) Раскрывающееся меню Chrome CSS

        Chrome Menu — это гибридное раскрывающееся меню CSS и JavaScript. Его легко настроить, и он удобен для поисковых систем.

        Учебные пособия по раскрывающемуся меню

        CSS Pop-Out Menu Tutorial

        Выпадающие меню CSS Express

        Меню

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

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

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