Публикации

Пользователь:

Пароль:


Запомнить

Регистрация
Забыли пароль?



Пользователей: 3892
Новичок: doktor_a
Поддержи проект
Поддержите проект Webmoney
R197422573540
E197270426287
Z701768662172
Сказали «Спасибо»

Навигация

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


Автор: Кадников Александр
 9.9 - 132 голосов -

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



Что ж попытаюсь доступно ответить. Итак приступим.

1. Заходим в папку со своей темой сайта.
2. Создаем папку files
3. В папке files создаем файл menu_links.php в котором будут содержаться ссылки от пунктов меню, содержание и структура файла примерно следующая:
  1. <?php
  2. // Заполняем ссылки для меню навигации по степени вложенности меню
  3.  
  4. // Для 1 пункта меню
  5. define("link_01", "http://www.mysite.ru/");
  6. // Для 2 пункта меню
  7. define("link_02", "http://www.mysite.ru/");
  8. define("link_02_01", "http://www.mysite.ru/");
  9. // Для 3 пункта меню
  10. define("link_03", "http://www.mysite.ru/");
  11. ?>


Рекомендую ссылки заполнять по степени вложенности меню, чтобы самим потом не запутаться.
Пример:
– Цитата: 
link_01 - первое меню
link_01_01 - первое меню, первый пункт подменю
link_01_02 - первое меню, второй пункт подменю
link_01_02_01 - первое меню, второй пункт подменю, первый пункт подподменю

ну и так далее до бесконечности...

4. Идем дальше, в этой же папке files создаем 6 изображений нашего будущего меню со следующими названиями:

arrow.png
arrow_over.png
thr ee_0.png
three_0a.png
three_1. png
three_1a.png

У меня они выглядят так:
– Цитата: 
- arrow.png 4x7 px

- arrow_over.png 4x7 px

- three_0.png 2x35 px

- three_0a.png 300x35 px

- three_1.png 300x35 px

- three_1a.png 300x35 px

Вы естественно можете нарисовать свои изображения, под дизайн своего сайта.

5. Выходим из папки files в папку с вашей темой, и создаем в ней файл dropdown.sc со следующим содержимым:

6. В папке с темой создаем еще один файл Hover.js со следующим содержимым:

  1. var images = new Array();
  2.  
  3. function preloadImages(){
  4.     for (i=0; i < preloadImages.arguments.length ; i++){
  5.          images[i] = new Image();
  6.         images[i].src = preloadImages.arguments[i];
  7.     }
  8. }
  9.  
  10. preloadImages("files/ three_1.png", "files/three_1a.png", "files/arrow_over.png");
  11.  
  12. cdgHover = function() {
  13.         var cssRule;
  14.         var newSelector;
  15.         for (var i = 0; i < document.styleSheets.length; i++)
  16.                 for (var x = 0; x < document.styleSheets[i] .rules.length ; x++)
  17.                         {
  18.                         cssRule = document.styleSheets[i] .rules[x];
  19.                         if (cssRule.selectorText.indexOf( "LI:hover") >= 0)
  20.                         {
  21.                                  newSelector = cssRule.selectorText.replace(/ LI:hover/gi, "LI.iehover");
  22.                                 document.styleSheets[i] .addRule(newSelector , cssRule.style.cssText);
  23.                         }
  24.                 }
  25.         var getElm = document.getElementById("nav") .getElementsByTagName("LI");
  26.         for (var i=0; i<getElm.length; i++) {
  27.                 getElm[i] .onmouseover=function() {
  28.                         this.className+=" iehover";
  29.                 }
  30.                 getElm[i] .onmouseout=function() {
  31.                         this.className=this.className. replace(new RegExp(" iehover\\b"), "");
  32.                 }
  33.         }
  34. }
  35. if (window.attachEvent) window.attachEvent("onload", cdgHover);


7. Открываем файл style.css нашей темы и добавляем в конец файла следующие строки:

  1.  
  2. /*---------------------------- --- Меню ------------------------------ ------*/
  3. #nav {padding:0; margin:0; list-style:none; height:38px; background:#3E4957 url(files/three_0.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
  4. #nav li.top {display:block; float:left; height:38px;}
  5. #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:normal; padding:0 0 0 12px; cursor:pointer;background: url(files/three_0.png);}
  6. #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(files/three_0.png) right top no-repeat;}
  7. #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(files/three_0a.png) no-repeat right top;}
  8.  
  9. #nav li:hover a.top_link,
  10. #nav li.iehover a.top_link {color:#fff; background: url(files/three_1.png) no-repeat; cursor:pointer;}
  11. #nav li:hover a.top_link span,
  12. #nav li.iehover a.top_link span {background:url(files/three_1.png) no-repeat right top; cursor:pointer;}
  13. #nav li:hover a.top_link span.down,
  14. #nav li.iehover a.top_link span.down {background:url(files/three_1a.png) no-repeat right top; cursor:pointer;}
  15.  
  16. /* Моделирование списка по умолчанию */
  17.  
  18. #nav li:hover {position:relative; z-index:200; cursor:pointer;}
  19.  
  20. #nav li:hover ul.sub
  21. {left:1px; top:38px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:150px; height:auto; z-index:300; cursor:pointer;}
  22. #nav li:hover ul.sub li
  23. {display:block; height:20px; position:relative; float:left; width:150px; font-weight:normal; cursor:pointer;}
  24. #nav li:hover ul.sub li a
  25. {display:block; font-size:11px; height:18px; width:148px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none;border:1px solid #1F242B; cursor:pointer;}
  26. #nav li ul.sub li a.fly
  27. {background:#1F242B url(files/arrow.png) 140px 6px no-repeat; cursor:pointer;}
  28. #nav li:hover ul.sub li a:hover
  29. {background:#b2b2b2; color:#000; border-color:#fff; cursor:pointer;}
  30. #nav li:hover ul.sub li a.fly:hover
  31. {background:#1F242B url(files/arrow_over.png) 140px 6px no-repeat; color:#fff; cursor:pointer;}
  32.  
  33.  
  34. #nav li:hover li:hover ul,
  35. #nav li:hover li:hover li:hover ul,
  36. #nav li:hover li:hover li:hover li:hover ul,
  37. #nav li:hover li:hover li:hover li:hover li:hover ul
  38. {left:150px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:150px; z-index:400; height:auto;}
  39.  
  40. #nav ul,
  41. #nav li:hover ul ul,
  42. #nav li:hover li:hover ul ul,
  43. #nav li:hover li:hover li:hover ul ul,
  44. #nav li:hover li:hover li:hover li:hover ul ul
  45. {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
  46.  
  47. #nav li:hover li:hover a.fly,
  48. #nav li:hover li:hover li:hover a.fly,
  49. #nav li:hover li:hover li:hover li:hover a.fly,
  50. #nav li:hover li:hover li:hover li:hover li:hover a.fly
  51. {background:#b2b2b2 url(files/arrow_over.png) 140px 6px no-repeat; color:#000; border-color:#fff;}
  52.  
  53. #nav li:hover li:hover li a.fly,
  54. #nav li:hover li:hover li:hover li a.fly,
  55. #nav li:hover li:hover li:hover li:hover li a.fly
  56. {background:#1F242B url(files/arrow.png) 140px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
  57.  

Естественно цвета правим под свою тему. Сохраняем файл.

8. Открываем файл theme.php и добавляем следующие строки в начало файла, но после тега <?php:

  1. ...
  2. @include_once(THEME."files/menu_links.php");
  3. $register_sc[] = "DROPDOWN";
  4.  

9. Вставляем в шапку сайта, в удобное место следующий шорткод
  1. {DROPDOWN}

10. Сохраняем файл.

Вот и всё, меню готово.

В продолжение темы -