Инструменты пользователя

Инструменты сайта


site_navigation_menu

Различия

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

Ссылка на это сравнение

site_navigation_menu [2018/07/07 05:59] (текущий)
Строка 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>​
загрузка...
site_navigation_menu.txt · Последние изменения: 2018/07/07 05:59 (внешнее изменение)