Меню с тремя состояниями на CMS

Меню с тремя состояниями на CMS

На основании предыдущем уроке я решил создать этот учебник объяснить, как сделать меню со всеми права, вы можете использовать его для любой PHP страницы у вас есть, и даже для любой CMS особенно известных WordPress.

Посмотреть демо-

Инструменты

1 - изображение каждого меню сократить раздел.

2 - изображения будут использоваться в наведении собственности.

3 - Программа для HTML (например, Dreamweaver).

4 - Некоторые знания: CSS, HTML и PHP.

HTML структура

Прежде всего, мы должны открыть новую страницу PHP и HTML сделать структуру нашего меню, которые мы будем создавать упорядоченные списки: 

  1
 2
 3
 4
 5
 6

 "menu" > <!--Comienza Menu--> < li >< a class = "index" href = "index.php" > Home < / a >< / li > < li >< a class = "enviar" href = "enviar.php" > Enviar < / a >< / li > < li >< a class = "contacto" href = "contacto.php" > Contacto < / a >< / li > < li >< a class = "recursos" href = "recursos.php" > Recursos < / a >< / li > < / ul > <!--Termina Menu--> <ul ID = "menu"> <! - Меню "Пуск" -> <a <li> класс = "index" HREF = "index.php"> Главная страница </ A> </ LI> <li> <класс = "представить" HREF = "enviar.php"> Отправить </ A> </ LI> <li> <a класс = "contact" HREF = "contacto.php"> контакт </ A> </ LI> <LI > <a класс = "resources" HREF = "recursos.php"> ресурсы </ A> </ LI> </ UL> <! - Конец Меню ->

Теперь, мы добавим идентификатор тега <ul> (первая строка), то мы добавим класс для каждой этикетке <a> (1 различных для каждой ссылки), так что мы будем иметь индекс, электронную почту, контакты ресурсов.

Этого достаточно, чтобы иметь HTML структуру нашего меню, сохраните страницу index.php и идти с стиле.

Добавление стиля

Открытие новой страницы CSS.

css-menu

Мы держим его в качестве style.css и вернулся на страницу PHP, чтобы ссылка на стиль .

Мы начали наш путь к элементу "*", который, как описано в видео-учебник о том, как сделать тему WordPress с нуля, используется для добавления различных функций для всех элементов, так что каждый недвижимости вам добавить звездочку, он будет приняты все элементы, присутствующие на нашем сайте, мы просто добавить поля и отступы: 

  1
 2
 3
 4

 : 0 ; padding : 0 ; } * (Маржа: 0; обивка: 0;)

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

и поэтому тела в нашей CSS: 

  1
 2
 3
 4
 5

 : url ( imagenes/bg.png ) repeat-x #333333 ; font-size : 12px ; font-family : Arial , Helvetica , sans-serif ; } тела (справочная информация: URL (образы / bg.png) повторяю х # 333333; размер шрифта: 12px; семейство шрифтов: Arial, Helvetica, без засечек;)

Хорошо, теперь, если мы начнем давать стиль нашего меню, в первую очередь с идентификатором "меню" 

  1
 2
 3
 4

  # Меню (
 none ; список-стиль: нет;
 15px ; маржи-топ: 15px;
 )

Он просто снял точки в начале каждого пункта в списке (строка 2) и верхний предел для BG пары ubircarlo (строка 3).

Мы по-прежнему с элементом "ли", который мы только добавить свойство "дисплей: встроенный", который будет расположен рядом друг с другом. 

  1
 2
 3

  # Li меню (
 inline ; дисплей: встроенный;
 )

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

  1
 2
 3
 4
 5
 6
 7
 Август

  # Меню Li (
 block ; дисплей: блок;
 60px ; ширина: 60px;
 102px ; высота: 102px;
 left ; плавать: слева;
 -5000px ; текстовый абзац:-5000px;
 2px ; маржа налево: 2px;
 )

Ширина и высота каждого снимка (линии 3 и 4 соответственно), имущество плавать: слева находится один справа от других текстовых абзац удалить текст, который находится внутри тега <a> и левому краю, чтобы отделить меню немного друг от друга.

Мы в настоящее время используется в каждом классе названием "". так что у нас осталось. 

  1
 2
 3
 4
 5
 6
 7
 Август
 9
 10
 11
 12

 { background : url ( imagenes/home.png ) no-repeat ; } #menu li a .enviar { background : url ( imagenes/enviar.png ) no-repeat ; } #menu li a .contacto { background : url ( imagenes/contacto.png ) no-repeat ; } #menu li a .recursos { background : url ( imagenes/recursos.png ) no-repeat ; } # Меню Ли А. Index (справочная информация: URL (образы / home.png) нет-повторяю;) # меню Ли А. отправке (справочная информация: URL (образы / enviar.png) нет-повторяю;) # меню Ли А. Контакты (справочная информация: URL (образы / contacto.png) нет-повторяю;) # меню Ли А. ресурсов (справочная информация: URL (образы / recursos.png) нет-повторяю;)

просто добавить фон к каждому элементу.

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

  1
 2
 3
 4
 5
 6
 7
 Август
 9
 10
 11
 12

 :hover { background : url ( imagenes/home-hover.png ) no-repeat ; } #menu li a .enviar :hover { background : url ( imagenes/enviar-hover.png ) no-repeat ; } #menu li a .contacto :hover { background : url ( imagenes/contacto-hover.png ) no-repeat ; } #menu li a .recursos :hover { background : url ( imagenes/recursos-hover.png ) no-repeat ; } # Меню Ли А. Индекс: наведите (справочная информация: URL (образы / домашнюю hover.png) нет-повторяю;) # меню Ли А. Передача: наведите (справочная информация: URL (изображения и представить-hover.png) нет-повторяю ;) # меню Ли А. Контактное лицо: наведите (справочная информация: URL (образы / контакт-hover.png) нет-повторяю;) # меню Ли А. ресурсы: наведите (справочная информация: URL (изображений / ресурсов, hover.png) Нет -повторить;)

Готовы, просто добавьте "наведении" в конце каждого элемента и изменить образ каждого из них.

С того, что было сделано до сих пор только собираетесь иметь в своем распоряжении возможность прохождения курсор на изображение. Это где PHP входит в игру, как мы делаем это, что она знаменует разделе меню, где мы находимся?, Мы делаем это путем простого добавления идентификатор к телу.

Например: 

  1

  "enviar" > <body ID = "post">

Если вы не будете использовать это меню в WordPress или любой другой CMS только добавить идентификатор отличается от тела на каждой странице и перейти к следующему шагу CSS ниже, вы бы ваше тело так:

Файл: index.php

орган: 

  1

  "index" > <body ID ='index'>

Файл: enviar.php

орган: 

  1

  "enviar" > <body ID = "post">

Файл: contacto.php

орган: 

  1

  "contacto" > <body ID = "contact">

Файл: recursos.php

орган: 

  1
 2

  ]
 "recursos" > <body ID = "resources">

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

Если вы используете это меню в WordPress, мы будем иметь проблемы, как мы можем добавить идентификатор для каждого органа другому, если бы меня в один файл с названием "header.php", т.е. тот же заголовок файла для отправки и домашнюю страницу контакта, то давайте добавим следующий код PHP. наших страницах.

Прежде чем мы <body> написать следующее: 

  1
 2
 3
 4
 5
 6
 7

 = $_SERVER [ 'REQUEST_URI' ] ; $pagina = str_replace ( "/" , "" , $pagina ) ; $pagina = str_replace ( ".php" , "" , $pagina ) ; $pagina = str_replace ( "?s=" , "" , $pagina ) ; $pagina = $pagina ? $pagina : 'default' ?> <? Php страницы $ = $ REQUEST_URI '] _SERVER [', $ = str_replace страницы ("/", "", $ страницы) $ страница = str_replace (". Php", "", $ страницы) $ страница = str_replace ("? з =", "", $ страницы) $ странице = $ странице? $ странице: "по умолчанию"?>

Я объясню, что в каждой строке:

1 - Откройте PHP-кода

2 - Приведите URL, в котором мы (напомним, что WordPress URL используется более в чем-то вроде "http://www.tublog/tu-pagina/).

3 - Где оставить черту "/" будет заменен на что-нибудь! "."

4 - Куда пойти некоторые из них. "PHP", будут заменены все!.

5 - Куда идти? S = ", будут заменены все!.

6 - Это возвращает результат.

7 - Закрыть теги PHP.

Так что нам сделать, это принять URL и удалить все те вещи, которые не служат нам для ID.

Теперь мы идем к нашему телу, и мы добавим: 

  1

  "<?php echo $pagina ?>" > <Органа ID = "<? Php Эхо $ странице?>>

На старт! орган примет ID страницы, на которой мы находимся.

Теперь мы переходим к нашей идентификатор добавить стиль к телу.

Добавить в следующем. 

  1
 2
 3
 4
 5
 6
 7
 Август
 9
 10
 11
 12

 { background : url ( imagenes/home-hover.png ) no-repeat ; } body #enviar #menu li a .enviar { background : url ( imagenes/enviar-hover.png ) no-repeat ; } body #contacto #menu li a .contacto { background : url ( imagenes/contacto-hover.png ) no-repeat ; } body #recursos #menu li a .recursos { background : url ( imagenes/recursos-hover.png ) no-repeat ; } # # Индекс тела меню Ли А. индекс (справочная информация: URL (образы / домашнюю hover.png) нет-повторяю;) тела # # электронной почты меню Ли А. представить (справочная информация: URL (изображения и представить-hover.png) Нет -повторить;) тела # # меню контакта Ли А. контакта (справочная информация: URL (образы / контакт-hover.png) нет-повторяю;) # # меню тела Ли ресурсов. ресурсы (справочная информация: URL (изображений / ресурсов, наведите . PNG) нет-повторяю;)

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

На старт! Мы закончили наше меню как WordPress как CMS или любую другую страницу. PHP, сюда, где я оставить почтовые файлы являются окончательными.

СКАЧАТЬ результате этого TUTORIAL ЗДЕСЬ

Майкл является автором и редактором skyandstars.net который публикует руководства и учебники для WordPress, CuteNews, PHP, HTML и многое другое. Есть студентом колледжа.

Mijael166

Может быть, одна из этих записей могут вас заинтересовать

7 Ответы на "меню с тремя состояниями на CMS

  1. Иса

    27 апреля 2009

    Ответ

    Я немного запутался, что я вижу свое меню, как я делаю с Dreamweaver, и, конечно, легче: S

    Сразу как повысить уровень руководства Майкл! Я поздравляю вас:)

  2. Майкл

    28 апреля 2009

    Ответ

    Ха-ха, да ... в основном изменения фотографии .. но я хотел бы подчеркнуть, что эффект страница подчеркнул в этих .... HACR dificl WordPress происходит потому, что тот же заголовок, который работает для всех страниц ... entoncs ... потому что с PHP это ... поцелуй ISA =)

  3. Иса

    29 апреля 2009

    Ответ

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

  4. Майкл

    30 апреля 2009

    Ответ

    Конечно: P просто должны это сделать идентификатор добавил стиль тела:) ... или если вы хотите автоматически положил тело, сделать это с PHP ... но хорошо .. является по своему вкусу ... Un Beso!

  5. Иса

    30 апреля 2009

    Ответ

    OK! хе-хе

  6. graciebird

    30 апреля 2009

    Ответ

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

  7. Ирана

    22 июня 2009

    Ответ

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

Оставить комментарий

Имя (обязательно)

Email (обязательно, но не публикуется)

Сеть

Комментарий (обязательно)

* Ваш адрес электронной почты используется для связывания его в свой аккаунт на Gravatar