Создание меню

Здравствуйте! В этом уроке рассмотрим как создать меню на CSS. Меню или панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

Вертикальное меню

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul.nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            ul.nav a {
                display: block;
                width: 7em;
                padding:10px;
                background-color: #f4f4f4;
                border-top: 1px dashed #333;
                border-right: 1px dashed #333;
                border-left: 5px solid #333;
                text-decoration: none;
                color: #333;
            }
            ul.nav li:last-child a {
                border-bottom: 1px dashed #333;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">Главная</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О сайте</a></li>
        </ul>
    </body>
</html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

		Это интересно 0	Как всё будет выглядеть в блоге: Создание меню Здравствуйте! В этом уроке рассмотрим как создать меню на CSS Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13148541/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Создание меню </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! В этом уроке рассмотрим как создать меню на CSS </div> </div> Создание меню <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13148541/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Создание меню</a> <div style="font-family:trebuchet MS;">Здравствуйте! В этом уроке рассмотрим как создать меню на CSS </div> </div>

webguru

21.01.2017 , обновлено 22.01.2017

В избранное Пожаловаться Просмотров: 544

Комментарии ⁰

Учимся работать в компьютерных программах 1086

Последние откомментированные темы:

Создание меню

Вертикальное меню

Комментарии временно отключены

Открытая группа
54221 участник