Как создать меню в стиле lavalamp в WordPress блоге

lavalamp меня для WordPress блогаЗдравствуйте, уважаемые читатели моего seo блога. Сегодня мы поговорим, как сделать меню в WordPress в стиле lavalamp.

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

Подопытным в данном уроке будет шаблон Mystique, на котором мы и будем рассматривать установку lavalamp меню. Это будет мой первый шаг с вами в изменении стандартного шаблона WordPress на новый и уникальный.

Установка lavalamp меню на WordPress

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

<ul id="nav"> <li><a href="http://iglous.ru/">Меню 0</a></li> <li><a class="hsubs" href="#">Меню 1</a> <ul class="subs"> <li><a href="#">Подменю 1</a></li> <li><a href="#">Подменю 2</a></li> </ul> </li> <li><a class="hsubs" href="#">Меню 2</a> <ul class="subs"> <li><a href="#">Подменю 2-1</a></li> <li><a href="#">Подменю 2-2</a></li> <div id="lavalamp"></div> </ul>

Как видно из данного примера, выпадающее меню состоит из меню, которое выводится при помощи класса hsubs, а подменю выводится классом subs.

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

<ul id="nav"> <li><a href="http://iglous.ru/">Меню 0</a></li> <li><a href="#">Главная</ </li> <li><a href="#">Карта сайта</a> </li>
<div id="lavalamp"></div> </ul>

Теперь нам надо заметить старое WordPress меню на новое. Для этого из админки WordPress перейдем во вкладку Внешний вид -> Редактор и откроем файл header.php, именно в нем и находится код, отвечающий за вывод меню.

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

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

<ul id="nav"> <li><a href="http://iglous.ru/">Меню 0</a></li> <li><a href="#">Главная</ </li> <li><a href="#">Карта сайта</a> </li>
<div id="lavalamp"></div> </ul>

Теперь нам надо заметить старое WordPress меню на новое. Для этого из админки WordPress перейдем во вкладку Внешний вид -> Редактор и откроем файл header.php, именно в нем и находится код, отвечающий за вывод меню.

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

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

<ul id="nav"> <li><a href="http://iglous.ru/">Меню 0</a></li> <li><a href="#">Главная</ </li> <li><a href="#">Карта сайта</a> </li>
<div id="lavalamp"></div> </ul>

1. Из всего этого я удалил строку:

  1. <?php atom()->menu($location = ‘primary’, $classes = ‘slide-down fadeThis’, $fallback = ‘pageMenu’); ?>

2. И на ее место ставлю код lavalamp меню:

  1. <head>
  2.       <link href=»css/menu.css» rel=»stylesheet» type=»text/css» />
  3.         </head>
  4.         <body>
  5.            <div class=»container»>
  6.                 <ul id=»nav»>
  7.                     <li><a href=»http://iglous.ru»>Меню 1</a></li>
  8.                     <li><a class=»hsubs» href=»#»>Меню 2</a></li>
  9.                     <li><a class=»hsubs» href=»#»>Меню 3</a>
  10.                         <ul class=»subs»>
  11.                             <li><a href=»#»>Подменю 1</a></li>
  12.                         </ul>
  13.                     </li>
  14.                     <li><a href=»#»>Меню 4</a></li>
  15.                     <div id=»lavalamp»></div>
  16.                 </ul>
  17.             </div>
  18.     <script type=»text/javascript» src=»Полный путь с http до файла с javascript»></script>
  19.         </body>

Предпоследняя строка <script type=»text/javascript» src=»Полный путь с http до файла с javascript»></script>, здесь пропишите путь до файла со скриптом, который будет нам правильно выводить меню.

Создание javascript файла, его код:

1. Создаем js файл с любым названием и вставляем в него код:

  1. 0<window.parent.frames.length&&(document.body.className+=»none»);window.onload=function(){var a=document,c=a.getElementsByTagName(«head»)[0],b=a.createElement(«link»),a=a.createElement(«script»);b.id=»nav»;b.rel=»stylesheet»;b.type=»text/css»;b.href=»http://Путь до файла — menu.css»;b.media=»all»;a.type=»text/javascript»;a.src=»http://Путь до файла с js»;c.appendChild(b);c.appendChild(a)};

Данный код можно загрузить в любой каталог.

Создаем CSS стиль для LavaLamp меню:

1. Создаем файл с разрешением css, назовем его menu.css ( не меняйте название, иначе придется редактировать код). Добавляем в него стили для меню:

  1.     #nav,#nav ul {
  2.         list-style: none outside none;
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     #nav {
  7.         background: url(‘menu_bg.png’) no-repeat scroll 0 0 transparent;
  8.         clear: both;
  9.         font-size: 12px;
  10.         height: 58px;
  11.         padding: 0 0 0 9px;
  12.         position: relative;
  13.         width: 957px;
  14.     }
  15.     #nav ul {
  16.         background-color: #222;
  17.         border:1px solid #222;
  18.         border-radius: 0 5px 5px 5px;
  19.         border-width: 0 1px 1px;
  20.         box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  21.         left: -9999px;
  22.         overflow: hidden;
  23.         position: absolute;
  24.         top: -9999px;
  25.         z-index: 2;
  26.         -moz-transform: scaleY(0);
  27.         -ms-transform: scaleY(0);
  28.         -o-transform: scaleY(0);
  29.         -webkit-transform: scaleY(0);
  30.         transform: scaleY(0);
  31.         -moz-transform-origin: 0 0;
  32.         -ms-transform-origin: 0 0;
  33.         -o-transform-origin: 0 0;
  34.         -webkit-transform-origin: 0 0;
  35.         transform-origin: 0 0;
  36.         -moz-transition: -moz-transform 0.1s linear;
  37.         -ms-transition: -ms-transform 0.1s linear;
  38.         -o-transition: -o-transform 0.1s linear;
  39.         -webkit-transition: -webkit-transform 0.1s linear;
  40.         transition: transform 0.1s linear;
  41.     }
  42.     #nav li {
  43.         background: url(‘menu_line.png’) no-repeat scroll right 5px transparent;
  44.         float: left;
  45.         position: relative;
  46.     }
  47.     #nav li a {
  48.         color: #FFFFFF;
  49.         display: block;
  50.         float: left;
  51.         font-weight: normal;
  52.         height: 30px;
  53.         padding: 23px 20px 0;
  54.         position: relative;
  55.         text-decoration: none;
  56.         text-shadow: 1px 1px 1px #000000;
  57.     }
  58.     #nav li:hover > a {
  59.         color: #00B4FF;
  60.     }
  61.     #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
  62.         background: none repeat scroll 0 0 #121212;
  63.         outline: 0 none;
  64.     }
  65.     #nav li:hover ul.subs {
  66.         left: 0;
  67.         top: 53px;
  68.         width: 180px;
  69.         -moz-transform: scaleY(1);
  70.         -ms-transform: scaleY(1);
  71.         -o-transform: scaleY(1);
  72.         -webkit-transform: scaleY(1);
  73.         transform: scaleY(1);
  74.     }
  75.     #nav ul li {
  76.         background: none;
  77.         width: 100%;
  78.     }
  79.     #nav ul li a {
  80.         float: none;
  81.     }
  82.     #nav ul li:hover > a {
  83.         background-color: #121212;
  84.         color: #00B4FF;
  85.     }
  86.     #lavalamp {
  87.         background: url(‘lavalamp.png’) no-repeat scroll 0 0 transparent;
  88.         height: 16px;
  89.         left: 13px;
  90.         position: absolute;
  91.         top: 0px;
  92.         width: 64px;
  93.         -moz-transition: all 300ms ease;
  94.         -ms-transition: all 300ms ease;
  95.         -o-transition: all 300ms ease;
  96.         -webkit-transition: all 300ms ease;
  97.         transition: all 300ms ease;
  98.     }
  99.     #lavalamp:hover {
  100.         -moz-transition-duration: 3000s;
  101.         -ms-transition-duration: 3000s;
  102.         -o-transition-duration: 3000s;
  103.         -webkit-transition-duration: 3000s;
  104.         transition-duration: 3000s;
  105.     }
  106.     #nav li:nth-child(1):hover ~ #lavalamp {
  107.         left: 19px;
  108.     }
  109.     #nav li:nth-child(2):hover ~ #lavalamp {
  110.         left: 100px;
  111.     }
  112.     #nav li:nth-child(3):hover ~ #lavalamp {
  113.         left: 182px;
  114.     }
  115.     #nav li:nth-child(4):hover ~ #lavalamp {
  116.         left: 263px;
  117.     }
  118.     #nav li:nth-child(5):hover ~ #lavalamp {
  119.         left: 345px;
  120.     }
  121.     #nav li:nth-child(6):hover ~ #lavalamp {
  122.         left: 427px;
  123.     }
  124.     #nav li:nth-child(7):hover ~ #lavalamp {
  125.         left: 509px;
  126.     }
  127.     #nav li:nth-child(8):hover ~ #lavalamp {
  128.         left: 591px;
  129.     }

Последние строки с nth-child влияют на положение ползунка, если ползунок будет находиться неровно поменяйте эти значения. Придется редактировать notepad редактором, загружая файлы FTP программой.

Если у вас будет больше 8 вкладок меню, то добавьте еще одну строку. Загрузите файл в каталог с темой в папку css.

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

Подключаемся программой FileZilla и переходим в папку wp-content/uploads, закачиваем файл с окончанием 8817735e9.css. Открываем его в блокноте NotePad и ищем строку .media{position: absolute;bottom: далее будет следовать в пикселях, заданное число, которое отвечает за высоту иконок над меню. Если его не менять, то иконок будет не видно. Ставим значение около 35px-50px.

Вот вы и сделали свое первое меню на css для WordPress.


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

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

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

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