Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Помогите настроить выпадающее меню
Новые публикации Скрыть панель справаПоказать панель справа

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

2013-08-09T11:49:26+04:00 2017-02-27T13:31:11+03:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 0 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 11:49, 09.08.2013
Дизайн для Друпала, тема Willibald.

Что есть: выпадающее меню, и первый и второй уровни, отображается в виде "кнопок", а надо, чтобы второй уровень отображался в виде СПИСКА.

Устанавливал в #main-menu li.level-2 display: list-item;

но не помогло. Пробовал и разные др. варианты - ничего не меняется. Помогите.
Вот код стиля

HTML code:
  1. /**
  2.  * @file
  3.  * Menu styling
  4.  */
  5. /*******************************************************************************
  6.  * Mobile first
  7.  ******************************************************************************/
  8. #main-menu {
  9.   background-color: #ddd;
  10.   line-height: 1;
  11.   width: 100%;
  12.   padding: .2em;
  13.   /*
  14.    * Level 1 <ul> tag
  15.    */
  16.   /*
  17.    * Level 1 <li> tag
  18.    */
  19.   /*
  20.    * Level 2 <ul> tag
  21.    */
  22. }
  23. #main-menu ul, #main-menu li {
  24.   list-style-image: none;
  25.   list-style-position: 0;
  26.   list-style-type: none;
  27.   margin: 0;
  28.   padding: 0;
  29. }
  30. #main-menu > ul {
  31.   display: block;
  32.   width: 100%;
  33. }
  34. #main-menu li.level-1 {
  35.   float: left;
  36.   margin: .1em;
  37.   padding: .4em .7em;
  38.   background-color: #727b8a;
  39. }
  40. #main-menu li.level-1:nth-child(4n+1) {
  41.   background-color: #485873;
  42. }
  43. #main-menu li.level-1:nth-child(4n+2) {
  44.   background-color: #d67c1c;
  45. }
  46. #main-menu li.level-1:nth-child(4n+3) {
  47.   background-color: #a2c037;
  48. }
  49. #main-menu li.level-1:nth-child(4n+4) {
  50.   background-color: #78adb8;
  51. }
  52. @media all and (max-width: 45em) {
  53.   #main-menu li.level-1:hover {
  54.     opacity: .5;
  55.     background-color: #8a95a7;
  56.   }
  57. }
  58. #main-menu li.level-1 a {
  59.   color: white;
  60.   text-transform: uppercase;
  61. }
  62. @media all and (max-width: 45em) {
  63.   #main-menu li.level-1 a:hover {
  64.     opacity: 1;
  65.     background-color: #8a95a7;
  66.   }
  67. }
  68. #main-menu li.level-1 > ul {
  69.   display: none;
  70. }
  71. #main-menu li.level-4 {
  72.   display: none;
  73. }
  74.  
  75. /*******************************************************************************
  76.  * Large
  77.  ******************************************************************************/
  78. @media all and (min-width: 45em) {
  79.   #main-menu {
  80.     padding: 0;
  81.     /*
  82.      * Colors
  83.      */
  84.     /*
  85.      * Level 1 <ul> tag
  86.      */
  87.     /*
  88.      * Level 1 <li> tag
  89.      */
  90.     /*
  91.      * Level 2 <ul> tag
  92.      */
  93.     /*
  94.      * Level 2 <ul> tag : hover
  95.      */
  96.     /*
  97.      * Level 2 <li> tag
  98.      */
  99.     /*
  100.      * Level 3 <ul> tag
  101.      */
  102.     /*
  103.      * Level 3 <li> tag
  104.      */
  105.     /*
  106.      * Frontpage
  107.      */
  108.   }
  109.   #main-menu li.level-1 > ul {
  110.     background-color: #727b8a;
  111.   }
  112.   #main-menu li.level-1:nth-child(4n+1) > ul {
  113.     background-color: #485873;
  114.   }
  115.   #main-menu li.level-1:nth-child(4n+2) > ul {
  116.     background-color: #d67c1c;
  117.   }
  118.   #main-menu li.level-1:nth-child(4n+3) > ul {
  119.     background-color: #a2c037;
  120.   }
  121.   #main-menu li.level-1:nth-child(4n+4) > ul {
  122.     background-color: #78adb8;
  123.   }
  124.   #main-menu li.level-1:first-child {
  125.     margin-left: 2em;
  126.   }
  127.   #main-menu > ul {
  128.     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAMAAABYpfH2AAAAGXRFW HRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRFubm5WF9rWWBrqqqq////wszonAAAA BZJREFUeNpiYGRgZGBiYGGgNmAGCDAAAwMADGofgFwAAAAASUVORK5CYII=');
  129.     height: 45px;
  130.     position: relative;
  131.   }
  132.   #main-menu li.level-1 {
  133.     border: 0;
  134.     border-left: 1px solid #ccc;
  135.     display: block;
  136.     height: 45px;
  137.     margin: 0;
  138.     padding: 0;
  139.     z-index: 500;
  140.   }
  141.   #main-menu li.level-1:first-of-type {
  142.     border: 0;
  143.   }
  144.   #main-menu li.level-1 > a {
  145.     background: #eeeeee;
  146.     border-bottom: 1px solid #aaa;
  147.     border-top: 1px solid white;
  148.     color: #727b8a;
  149.     display: block;
  150.     font-size: 1em;
  151.     height: 42px;
  152.     margin-top: 3px;
  153.     padding: .7em 1em 0 1em;
  154.     text-align: center;
  155.     text-decoration: none;
  156.     white-space: nowrap;
  157.     width: 100%;
  158.   }
  159.   #main-menu li.level-1 > a.active {
  160.     text-shadow: 0 0 10px #727b8a;
  161.   }
  162.   #main-menu li.level-1 > a:hover {
  163.     background: rgba(190, 190, 190, 0.5);
  164.     color: white;
  165.     opacity: 1;
  166.   }
  167.   #main-menu li.level-1.hover-trail > a {
  168.     background: rgba(190, 190, 190, 0.5);
  169.   }
  170.   #main-menu li.level-1 > ul {
  171.     -webkit-box-shadow: 0 0 0 1px white, 0 0 7px black;
  172.     -moz-box-shadow: 0 0 0 1px white, 0 0 7px black;
  173.     box-shadow: 0 0 0 1px white, 0 0 7px black;
  174.     -webkit-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s;
  175.     -moz-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s;
  176.     -ms-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s;
  177.     -o-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s;
  178.     transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s;
  179.     border: 0;
  180.     display: table-row;
  181.     float: left;
  182.     height: 0;
  183.     left: 0;
  184.     opacity: 0;
  185.     overflow: hidden;
  186.     position: absolute;
  187.     top: 45px;
  188.     width: 100%;
  189.     z-index: 100;
  190.   }
  191.   #main-menu li.level-1:hover > ul {
  192.     height: 3em;
  193.     opacity: 1;
  194.   }
  195.   #main-menu li.level-1.max-1:hover > ul {
  196.     height: 5.1em;
  197.   }
  198.   #main-menu li.level-1.max-2:hover > ul {
  199.     height: 6.7em;
  200.   }
  201.   #main-menu li.level-1.max-3:hover > ul {
  202.     height: 8.3em;
  203.   }
  204.   #main-menu li.level-1.max-4:hover > ul {
  205.     height: 9.9em;
  206.   }
  207.   #main-menu li.level-1.max-5:hover > ul {
  208.     height: 11.5em;
  209.   }
  210.   #main-menu li.level-1.max-6:hover > ul {
  211.     height: 13.1em;
  212.   }
  213.   #main-menu li.level-1.max-7:hover > ul {
  214.     height: 14.7em;
  215.   }
  216.   #main-menu li.level-1.max-8:hover > ul {
  217.     height: 16.3em;
  218.   }
  219.   #main-menu li.level-1.max-9:hover > ul {
  220.     height: 17.9em;
  221.   }
  222.   #main-menu li.level-1.max-10:hover > ul {
  223.     height: 19.5em;
  224.   }
  225.   #main-menu li.level-2 {
  226.     background: none;
  227.     border-right: 1px solid white;
  228.     float: left;
  229.     text-transform: uppercase;
  230.     font-family: "Willibald Sans Black", sans-serif;
  231.     padding: 1em;
  232.     display: table-cell;
  233.     height: 100%;
  234.   }
  235.   #main-menu li.level-2:last-child {
  236.     border: none;
  237.   }
  238.   #main-menu li.level-2 > a {
  239.     color: #fff;
  240.     display: block;
  241.     font-size: 1em;
  242.   }
  243.   #main-menu li.level-2 > a:hover {
  244.     opacity: .7;
  245.   }
  246.   #main-menu li.level-2 > a.active {
  247.     text-shadow: 0 0 10px white;
  248.   }
  249.   #main-menu li.level-2 > ul {
  250.     border: 0;
  251.     background: none;
  252.     float: none;
  253.     padding: 0;
  254.     margin-top: .5em;
  255.   }
  256.   #main-menu li.level-3 {
  257.     padding: .3em 0 .3em .8em;
  258.     font-family: "Willibald Sans", sans-serif;
  259.   }
  260.   #main-menu li.level-3 a {
  261.     display: block;
  262.     color: #fff;
  263.     text-transform: none;
  264.   }
  265.   #main-menu li.level-3 a:before {
  266.     content: "- ";
  267.   }
  268.   #main-menu li.level-3 a:hover {
  269.     opacity: .7;
  270.   }
  271.   #main-menu li.level-3 a.active {
  272.     text-shadow: 0 0 10px white;
  273.   }
  274.   #main-menu li.front {
  275.     width: 8%;
  276.     text-indent: -9999px;
  277.   }
  278.   #main-menu li.front a {
  279.     background-color: #eee;
  280.     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFW HRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ9JREFUeNpiYqAyYCJWYUF+fgIx6hiJNGw+k AIZuGDCxImJSOINUCZI/AFRLkQyDAQSoHwYqIdiBaK8jGYYAw5DUQALiYYhGypAdKQQMAwGAogykEjDi Es2FBjWDwsCRmq5DAguALEjM9QwAyAlCZVQIMOwBUB8Eoh/MKJ5uQGarkgFjsCEfYCkrEf1vDxq4BA2E L20OUCmOQ9gDIAAAwDZjTFwpZH3awAAAABJRU5ErkJggg==');
  281.     background-position: 50% 6px;
  282.     background-repeat: no-repeat;
  283.   }
  284.   #main-menu li.front a:hover {
  285.     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFW HRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ9JREFUeNpiYqAyYCJWYUF+fgIx6hiJNGw+k AIZuGDCxImJSOINUCZI/AFRLkQyDAQSoHwYqIdiBaK8jGYYAw5DUQALiYYhGypAdKQQMAwGAogykEjDi Es2FBjWDwsCRmq5DAguALEjM9QwAyAlCZVQIMOwBUB8Eoh/MKJ5uQGarkgFjsCEfYCkrEf1vDxq4BA2E L20OUCmOQ9gDIAAAwDZjTFwpZH3awAAAABJRU5ErkJggg==');
  286.     background-position: 50% 6px;
  287.     background-repeat: no-repeat;
  288.   }
  289. }
  290. @media all and (min-width: 45em) and (max-width: 40em) {
  291.   #main-menu li.level-1 {
  292.     height: 35px;
  293.   }
  294. }
  295. @media all and (min-width: 45em) and (max-width: 50em) {
  296.   #main-menu li.level-2 > a {
  297.     font-size: .95em;
  298.   }
  299. }
  300. @media all and (min-width: 45em) and (max-width: 50em) {
  301.   #main-menu li.level-3 a {
  302.     font-size: .9em;
  303.   }
  304. }
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 13:31, 27.02.2017
Создадим новое меню . Для этого в пункте «Название меню» введм название меню и нажмем «Создать меню».

Теперь добавим пункт меню. Например страницу «Главная». Выбираем ее в левой части и жмем «Добавить в меню». Дальше в правой части жмем «Сохранить меню». Все пункт меню добавлен.

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

Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».

Теперь мы хотим, чтобы пункт «Без рубрики» стал подпунктом пункта «Главная». Для этого просто перетащите пункт «Без рубрики вправо».

После всех изменений не забывайте сохранять меню.
Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.
 Шаг 2. Настройка внешнего вида меню.Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:

Теперь наведем курсор мыши на пункт «Главная»

Как видим появился выпадающий подпункт «Без рубоики».
Теперь давайте рассмотрим подробнее html код нашего меню:
  • Все меню по умолчанию заключено в div с классом menu-menu-container.
  • Дальше идет список ul с классом menu.
  • Каждый пункт меню заключен в li со многими классами, но нам интересны два класса menu-item иcurrent-menu-item (этот класс только у текущего пункта меню)
  • Подпункты определенного пункта заключены в список ul с классом sub-menu.
  • Каждый подпункт заключен в li с теми же классами, что и пункты родительского меню.
Теперь изменяя CSS свойства данных классов мы с легкостью можем привести наше меню к любому виду. Еще раз напомню, что приведенные классы для меню – это автоматически генерируемы классы по умолчанию WordPress.

Последний раз редактировал OniX 08:19, 28.02.2017
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Последние темы

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011