Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
—site_navigation_menu [2025/07/06 12:39] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== Меню навигации сайта ======
 +Навигационное меню сайта — это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте [[HTML5]], данный элемент выделили даже в отдельный тег <nav></nav>.
  
 +====== Навигационная панель из списка (ul, ol) ======
 +
 +  * ul, ol [[Маркированные(неупорядоченные) и нумерованные списки]]
 +
 +  * Для создания навигационная панель из списка в виде строки, а не столбца примеряется [[CSS]] свойство display в режиме inline.<file css>
 +style="display:inline; margin-right: 15px;"
 +</file>Можно воспользоваться свойством CSS float, это может привести к неправильному отображению в сложных веб страницах, например<file css>
 +style="float: left; margin: 0 0.15em;"
 +</file>
 +  * **Пример №1**<file css>
 +<ul style="list-style-type:none">
 +<li style="display:inline; margin-right: 15px;"><a href='index.php'>Номе</a></li>
 +<li style="display:inline; margin-right: 15px;"><a href='contact.php'>Contact</a></li>
 +<li style="display:inline; margin-right: 15px;"><a href='about.php'>About</a></li>
 +<li style="display:inline; margin-right: 15px;"><a href='project.php'>Project</a></li>
 +<li style="display:inline; margin-right: 15px;"><a href='map.php'>Map</a></li>
 +<li style="display:inline; margin-right: 15px;"><a href='#'>DDD</a></li>
 +</ul>
 +</file>
 +
 +  * **Пример №2.** Горизонтальное меню. [[HTML5|HTML]]<code css>
 +<ul>
 +   <li><a href="alphabet" title="Алфавит">Алфавит</a></li>
 +   <li><a href="/" title="Карта сайта">Карта сайта</a></li>
 +   <li><a href="#" title="Контакты">Контакты</a></li>
 +</ul>
 +</code>[[CSS]]<file css>
 +ul {
 +    list-style-type: none;
 +}
 +
 +ul li {
 +    display: inline;
 +    margin-right: 15px;
 +}
 +</file>
 +====== Контекстного меню (Тег <menu>) ======
 +
 +
 +  * Тег <menu> контейнер для тега <command> и создания меню. [[http://www.exlab.net/html/menus.html|HTML 5 Создание меню]]
 +
 +====== Drop-Down Navigation Menu with HTML5 and CSS3 ======
 +
 +Выпадающее меню.
 +
 +  * Оригинал находится на сайте [[http://www.ourtuts.com/create-a-drop-down-navigation-menu-with-html5-and-css3/|Create a Drop-Down Navigation Menu with HTML5 and CSS3]]. Ниже для моего личного удобства измененные исходники style.css<file css>
 +nav {
 +    position:relative;
 +    width:820px;
 +    margin:0 auto;
 +}
 +
 +ul#navigation {
 +    margin:0px auto;
 +    position:relative;
 +    float:left;
 +    border-left:1px solid #c4dbe7;
 +    border-right:1px solid #c4dbe7;
 +}
 +
 +ul#navigation li {
 +    display:inline;
 +    font-size:12px;
 +    font-weight:bold;
 +    margin:0;
 +    padding:0;
 +    float:left;
 +    position:relative;
 +    border-top:1px solid #c4dbe7;
 +    border-bottom:2px solid #c4dbe7;
 +}
 +
 +ul#navigation li a {
 +    padding:10px 25px;
 +    color:#616161;
 +    text-shadow:1px 1px 0px #fff;
 +    text-decoration:none;
 +    display:inline-block;
 +    border-right:1px solid #fff;
 +    border-left:1px solid #C2C2C2;
 +    border-top:1px solid #fff;
 +    background: #f5f5f5;
 +    transition:color 0.2s linear, background 0.2s linear;
 +}
 +
 +ul#navigation li a:hover {
 +    background:#f8f8f8;
 +    color:#282828;
 +}
 +
 +ul#navigation li:hover > a {
 +    background:#fff;
 +}
 +
 +/* Drop-Down Navigation */
 +ul#navigation li:hover > ul
 +{
 +    visibility:visible;
 +    opacity:1;
 +}
 +
 +ul#navigation ul, ul#navigation ul li ul {
 +    list-style: none;
 +    margin: 0;
 +    padding: 0;    
 +    visibility:hidden;
 +    position: absolute;
 +    z-index: 99999;
 +    width:180px;
 +    background:#f8f8f8;
 +    box-shadow:1px 1px 3px #ccc;
 +    opacity:0;
 +    transition:opacity 0.2s linear, visibility 0.2s linear;
 +}
 +
 +ul#navigation ul {
 +    top: 43px;
 +    left: 1px;
 +}
 +
 +ul#navigation ul li ul {
 +    top: 0;
 +    left: 181px;
 +}
 +
 +ul#navigation ul li {
 +    clear:both;
 +    width:100%;
 +    border:0 none;
 +    border-bottom:1px solid #c9c9c9;
 +}
 +
 +ul#navigation ul li a {
 +    background:none;
 +    padding:7px 15px;
 +    color:#616161;
 +    text-shadow:1px 1px 0px #fff;
 +    text-decoration:none;
 +    display:inline-block;
 +    border:0 none;
 +    float:left;
 +    clear:both;
 +    width:150px;
 +}
 +
 +ul#navigation li a.first {
 +    border-left: 0 none;
 +}
 +
 +ul#navigation li a.last {
 +    border-right: 0 none;
 +}
 +</file>index.html<file css>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <meta charset="UTF-8">
 +        <title>HTML5 / CSS3 Drop-Down Navigation Menu</title>
 +        <meta name="description" content="">
 +        <link rel="stylesheet" href="style.css">
 +    </head>
 +    <body>
 +        <nav>
 +            <ul id="navigation">
 +                <li><a href="#" class="first">Home</a></li>
 +                <li><a href="#">Services &raquo;</a>
 +                    <ul>
 +                        <li><a href="#">Web Development</a></li>
 +                        <li><a href="#">Logo Design</a></li>
 +                        <li><a href="#">Identity & Branding &raquo;</a>
 +                            <ul>
 +                                <li><a href="#">Business Cards</a></li>
 +                                <li><a href="#">Brochures</a></li>
 +                                <li><a href="#">Envelopes</a></li>
 +                                <li><a href="#">Flyers</a></li>
 +                            </ul>
 +                        </li>
 +                        <li><a href="#">Wordpress</a></li>
 +                    </ul>
 +                </li>
 +                <li><a href="#">Portfolio &raquo;</a>
 +                    <ul>
 +                        <li><a href="#">Graphic Design</a></li>
 +                        <li><a href="#">Photography</a></li>
 +                        <li><a href="#">Architecture</a></li>
 +                        <li><a href="#">Calligraphy</a></li>
 +                        <li><a href="#">Film &raquo;</a>
 +                            <ul>
 +                                <li><a href="#">John Carter</a></li>
 +                                <li><a href="#">The Avengers</a></li>
 +                                <li><a href="#">The Amazing SpiderMan</a></li>
 +                                <li><a href="#">Madagascar 3</a></li>
 +                            </ul>
 +                        </li>
 +                        <li><a href="#">Graffity </a></li>
 +                    </ul>
 +                </li>
 +                <li><a href="#">Testimonials</a></li>
 +                <li><a href="#">Blog</a></li>
 +                <li><a href="#" class="last">Contact</a></li>
 +            </ul>
 +        </nav>
 +
 +    </body>
 +</html>
 +</file>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга