Вертикальное меню раздвигающееся – Как заставить средствами css вертикальное меню при раскрытии отодвигать следующий за ним блок?

Leave a Comment / Разное / By /

Содержание

Вертикальное раздвижное меню с описанием на CSS3

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

 

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

Вертикальное раздвижное меню с описанием на CSS3

Данное меню было разработано моим другом Глебом Кавраским. Давайте же приступим к рассмотрению урока.

Шаг 1. HTML

Для начала нам необходимо подключить библиотеку jquery-latest:

<script type=»text/javascript» src=»/jquery-latest.js»></script>

Далее нам надо построить саму разметку, для каждого основного контейнера с содержанием мы будем использовать классы «button_podtext».

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<div>

<ul>

<li><div>CSS3<br>

<span>Основные возможности</span></div>

<ul>

<li><a href=»#»>Ссылка 1</a></li>

<li><a href=»#»>Ссылка 2</a></li>

</ul>

</li>

<li><div>HTML5<br>

<span>Продолжение или новая платформа?</span></div>

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

<li><div>WordPress<br>

<span>Новости в мире CMS</span></div>

<ul>

<li><a href=»#»>Ссылка 1</a></li>

<li><a href=»#»>Ссылка 2</a></li>

<li><a href=»#»>Ссылка 3</a></li>

</ul>

<li><div>Основное<br>

<span>Блог, Тесты, Форум</span></div>

<ul>

<li><a href=»#»>Ссылка 1</a></li>

<li><a href=»#»>Ссылка 2</a></li>

<li><a href=»#»>Ссылка 3</a></li>

</ul>

</li>

</ul>

<div><i>Разработано Глебом Кавраским</i></div>

C разметкой разобрались, переходим к следующему шагу.

Вертикальное раздвижное меню с описанием на CSS3

Шаг 2. CSS

Нам необходимо создать градиентную заливку меню, кроме этого создать окантовку, тени, и установить параметры для шрифтов и подпунктов аккордеона:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

#menu_pop {

margin: 120px auto ;

width: 280px;

background: url(‘wood.jpg’);

border-radius: 6px;

padding: 7px;

box-shadow: 0px 1px 5px #000;

}

 

#accordion {

list-style: none;

padding: 0px;

margin: 0px;

}

 

#accordion .button_podtext {

font-size: 9px;

color: #b1b1b1;

}

 

#accordion div {

display: block;

cursor: pointer;

text-decoration: none;

display: block;

padding: 8px 0px 8px 11px;

background: #000;

color: #fff;

font-size: 12px;

font-family: tahoma;

background: url(‘bg.png’) 0px 0px;

text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);

list-style: circle;

}

 

#accordion div:hover {

background: url(‘bg.png’) 0px -44px;

}

 

.first {

border-radius: 3px 3px 0px 0px;

}

 

#accordion ul a {

color: #777;

}

 

#accordion ul {

list-style: none;

padding: 5px;

font-size: 10px;

font-family: Tahoma;

background: #1a1a1a;

box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);

display: none;

}

 

#accordion ul li {

font-weight: normal;

cursor: auto;

padding: 3px 7px;

}

 

#accordion a {

text-decoration: none;

}

 

#accordion a:hover {

text-decoration: underline;

}

 

#menu_pop .menu_bottom {

display: block;

padding: 3px 6px 3px;

background: #000;

color: #fff;

font-size: 9px;

border-radius: 0px 0px 3px 3px;

font-family: georgia;

background: url(‘bg_bottom.png’) 0px 0px;

text-align: right;

text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);

}

Мы используем тени для придания меню небольшой объемности. Кроме это позволит создать иллюзию вдавленных кнопок. Переходим к следующему шагу.

Шаг 3. jQuery

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

//Определяем по нажатию на какой элемент должны открыватся подменю

$(«#accordion > li > div»).click(function(){

 

if(== $(this).next().is(‘:visible’)) {

$(‘#accordion ul’).slideUp(280);

}

$(this).next().slideToggle(280);

});

 

$(‘#accordion ul:eq(0)’).show();

Кроме этого вы можете указать в данном фрагменте кода скорость открытия и закрытия подпунктов. По умолчанию она установления на значении 280мс.

Вот и все. Готово!

Читайте также:

Многоуровневое вертикальное меню

<div>

    <ul>

        <li>

            <a href=»#»>Пункт меню 1</a>

            <input type=»checkbox» checked=»checked» />

            <label for=»1″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 1.1</a>

                    <input type=»checkbox» checked=»checked»/>

                    <label for=»1.1″></label>

                    <ul>

                        <li>

                            <a href=»#»>Пункт меню 1.1.1</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.2</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.3</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.3</a>

                </li>

            </ul>

        </li>    

        <li>

            <a href=»#»>Пункт меню 2</a>

            <input type=»checkbox» />

            <label for=»2″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 2.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.3</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.4</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 3</a>

            <input type=»checkbox» />

            <label for=»3″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 3.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 3.2</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 4</a>

            <input type=»checkbox» />

            <label for=»4″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 4.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.3</a>

                </li>

            </ul>

        </li>

    </ul>

</div>

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

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

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

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

Навигация по странице:

В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.

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

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

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

 

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

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

<nav>
    <ul>
        <li><a href="#m1">Первая услуга</a></li>
        <li><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li><a href="#m3">Третья</a>
            <ul>
                <li><a href="#m3_1">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_2">Выпадашка с третьей услуги 2</a></li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a></li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m6">6 услуга</a></li>
        <li><a href="#m7">7 услуга</a></li>
        <li><a href="#m8">8 услуга</a></li>
    </ul>
</nav><!--menuVertical-->

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

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

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

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                left:100%;
                display:none;
                width:auto;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover ul{display:block;}
                #menuVertical ul li ul li a{
                    white-space:nowrap;
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

 

Вот эта строчка CSS

#menuVertical ul li:hover ul{display:block;}

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

Посмотреть что у нас получилось в этом примере можно на скине:

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

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

 

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

к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                right:100%;/*поменяли здесь*/
                display:none;
                width:auto;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover ul{display:block;}
                #menuVertical ul li ul li a{
                    white-space:nowrap;
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

vertical-vpm-2

 

Далее, я хочу показать вам пример, как создать вертикальное многоуровневое меню с выпадашками при наведении.

Вертикальное многоуровневое меню

к менюВ жизни, вертикальные многоуровневые меню выпадающие при наведении встречаются довольно редко. Хотел показать пару примеров из своего загашника, но увы не смог найти. Придется сделать 🙂 . Сложного в этих меню для сайта ничего нет, типичный CSS для выпадашки.

Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:

<nav>
    <ul>
        <li><a href="#m1">Первая услуга</a></li>
        <li><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li><a href="#m3">Есть выпадашки далее</a>
            <ul>
                <li><a href="#m3_2">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_1">Есть выпадашки далее</a>
                    <ul>
                        <li><a href="#m3_1_1">Есть выпадашка далее</a>
                            <ul>
                                <li><a href="#m3_1_1_1">Пункт 1</a></li>
                                <li><a href="#m3_1_1_2">Выпадашка конец</a></li>
                                <li><a href="#m3_1_1_3">Выпадашка конец</a></li>
                            </ul>
                        </li>
                        <li><a href="#m3_1_2">Нет выпадашки далее</a></li>
                    </ul>
                </li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
                <li><a href="#m3_4">Краткая выпадашка</a></li>
                <li><a href="#m3_5">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a></li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m6">6 услуга</a></li>
    </ul>
</nav><!--menuVertical-->

 

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

 

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

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul > li:first-child > a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                left:100%;
                display:none;
                width:150px;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover > ul{display:block;}
                #menuVertical ul li ul li a{
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

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

vertical-vpm-3

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

 

Как создать такое же меню с выпадашкой влево?

Сейчас я приведу стиль, который нужно поменять, для создания выпадашки вправо:

На рисунке я показал где он находится:

vertical-vpm-4

На втором рисунке можно посмотреть как работает вертикальное многоуровневое меню влево при наведении.

vertical-vpm-5

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

На этом у меня все, до новых встреч.

Советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/ с разными вариантами меню, или же просмотреть запись горизонтальное выпадающее меню.

Поделитесь ссылкой со своими друзьями в социальных сетях:

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

Раздвигающееся вертикальное меню на CSS3

Раздвигающееся вертикальное меню на CSS3

В данном уроке представлено вертикальное раздвигающееся меню на CSS3. Подпункты появляются при нажатии основного пункта.

Разметка HTML
Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).

<ul>
    <li><a href="#"><img src="images/t1.png" /> Главная</a></li>
    <li><a href="#" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" />
        <ul>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 1</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 2</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 3</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 4</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 5</a></li>
        </ul>
    </li>
    <li><a href="#" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="images/up.gif" alt="" />
        <ul>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 6</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 7</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 8</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 9</a></li>
            <li><a href="#"><img src="images/empty.gif" />Ссылка 10</a></li>
        </ul>
    </li>
    <li><a href="#"><img src="images/t2.png" />PHP</a></li>
    <li><a href="#"><img src="images/t2.png" />MySQL</a></li>
    <li><a href="#"><img src="images/t2.png" />XSLT</a></li>
</ul>

CSS
#nav {
    border:3px solid #3e4547;
 
    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;
 
    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;
 
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}

Похожие новости:

Подборка jquery плагинов и css3 меню для сайта и д.р.

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

Вертикальный Accordion

Просто прекрасный эффект. Особенно подойдёт для портфолио.

Пример ι Скачать исходники

Раздвижное меню с jQuery

Прекрасная реализация навигации для Вашего сайта, с фоновыми изображениями

Пример ι Скачать исходники

Слайдер изображений с JQuery

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

Пример ι Скачать исходники

Вращение изображения с помощью JQuery

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

Пример ι Скачать исходники

Создание коллажа с JQuery

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

Пример ι Скачать исходники

Перемещение объект с JQuery.

Объект, при нажатии на кнопку, перемещается в контейнере в любом положении.

Пример ι Скачать исходники

10 простых и красивых css3 меню

Пример ι Скачать исходники

Всплывающие подсказки с jQuery.

Прекрасная реализация всплывающих и красивых подсказок.

Пример ι Скачать исходники

Всплывающее меню для блога WordPress

Прекрасный WordPress плагин всплывающего меню с использованием JQuery.

Пример ι Скачать исходники

Галерея с применением JQuery

Пример ι Скачать исходники

Плагин WordPress — выезжающее меню

Ещё один плагин для блога WordPress выезжающего меню.

Пример ι Скачать исходники

Вертикальное меню с JQuery

Замечательное многоуровневое меню для Вашего сайта

Пример ι Скачать исходники

Генератор случайных паролей.

Пример ι Скачать исходники

WordPress плагин — мега выпадающего меню.

Отличный плагин для блога. Очень красивое и функциональное выпадающее меню.

Пример ι Скачать исходники

4 кнопки для сайта

Пример ι Скачать исходники

Lightweight Slider с использованием JQuery

Самый простой слайдер текста.

Пример ι Скачать исходники

Просто меню с JQuery

Замечательное вертикальное меню. При наведении плавно выпадает подменю.

Пример ι Скачать исходники

Контактная форма

Простая контактная форма с проверкой на валидность введённых данных пользователем.

Пример ι Скачать исходники

Создание вертикального и раздвижного меню в wordpress

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

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

Установка бокового меню в wordpress

Чтобы установить боковое меню в wordpress можно воспользоваться виджетом «Собственное меню». Правда, перед этим нужно будет создать свое уникальное меню. К примеру, ваш сайт, занимается  продажей кухонных оборудований, таких как, краны, смесители и другая сантехника. Поэтому, прежде всего, нужно создать страницы типа «Главная», «Товары», «Статьи», «О нас». В статьях же можно выложить материалы о том, какой марки выбрать сантехнику, как купить мойку для кухни из искусственного камня, какие бывают виды смесителей и т. п. После чего, следует зайти в раздел «Меню» в админке вордпресса, и создать там новое меню из этих страниц, которое будет боковым. Теперь, как я говорил выше, можно расположить боковое меню с помощью виджета вордпресс. Для этого достаточно установить виджет в сайдбар и выбрать в нем соответствующее меню. А можно пойти другим путем, воспользоваться специальным плагином.

Видео установка плагина jQuery Slick Menu

Создание вертикального меню с помощью плагина jQuery Vertical Accordion Menu

Данный бесплатный плагин позволяет создать вертикальное раздвижное меню. Причем по умолчанию, уже есть пару готовых вариантов шаблонов меню, причем с различными цветами. Самая главная особенность данного плагина в том, что он позволяет создавать именно раздвижное меню. Это очень удобно, если скажем, в одном пункте меню у вас есть несколько подпунктов. При наведении мышкой на первый раздел будет раскрываться дополнительный список пункта. Еще одной приятной особенностью, которой обладает Vertical Accordion Menu, является наличие специального шорт-кода плагина. Который можно разместить в самих записях сайта, тем самым создав там меню.

плагин позволяет создавать различного цвета и стиля меню

Установить плагин можно через саму админку вордпресса, набрав там «jQuery Vertical Accordion Menu» или же скачать с официального сайта автора. После установки плагина, вам нужно зайти в «Виджеты», найти там виджет плагина, и перетянуть его в сайдбар. В самом виджете вы найдете все необходимые настройки плагина. Хочется добавить, что у автора jQuery Vertical Accordion Menu есть и другие специальные плагины, которые позволяют создавать различные многоуровневые меню, как вертикальные, так и горизонтальные.

Таким образом, создать вертикальное выпадающие (раздвижное) меню в wordpress, не так уж сложно, если использовать специальные плагины.

Похожие записи:

Вертикальное меню на сайте (страница 1)


Интернет и сайт

eTXT

Государственные лотереи

Анкетка



Симпатичное вертикальное меню с выделением пунктов при наведении мыши.

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

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

Классическое мобильное меню, которое появляется в левом поле страницы во всплывающем окне при нажатии кнопкой мыши на значок меню в миниатюре (три полоски). Основная страница при этом затеняется, а значок открытия меню принимает вид крестика (значка закрытия).

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

Меню с использованием CSS и изображений, красивое и практичное, с наименованиями подразделов. При клике мышью, подраздел открывается, обнажая ссылки. Фон каждой ссылки изменяется при наведении курсора мыши и появляется указатель (стрелочка).

Вертикальное меню с использованием анимации.

Это меню с использованием CSS3 анимации. При наведении курсора мыши пункты меню выделяются другим цветом и расширяются по горизонтали. Наклонный левый край создается также в CSS, без использования изображений.

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

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

Вертикальное меню с эффектом передвигающейся стрелки.

Простое вертикальное меню на CSS с использованием фонового изображения. Создан эффект передвигающейся стрелки.

Классическое вертикальное меню.

Классическое вертикальное меню, которое может быть вмонтировано в большинство конструкций сайтов.

Вертикальное многоцветное меню с подменю на CSS3.

Вертикальное меню с подменю на CSS3. Встроена возможность смены цвета body меню. Не используются фоновые изображения.

Красивое вертикальное меню «Дамское».

Это приятное глазу вертикальное меню на CSS с использованием одного изображения, объединяющего два фона с градиентом цвета. Цвет меню изменяется в зависимости от положения мыши.

Изящное вертикальное меню.

Это вертикальное меню на CSS. Используются фоновые изображения, которые обеспечивают замену цвета при наведении курсора мыши на ссылку.



Работа в интернете с текстами aliexpress-cashback


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

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