Создание бокового меню
19 апреля 2018 | Опубликовано в css | Нет комментариев »
Вертикально расположенное меню на веб-сайте в чем-то легче создать, так как список изначально создается вертикальным, основная проблема при этом — создать макет. Код меню HTML в этой ситуации будет примерно таким же, как и в других:
<nav> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Order</a> <a href="#">Privacy Statement</a> <a href="#">Contact</a> </nav>
Большинство пользователей ожидают увидеть основное меню на веб-странице слева или сверху, в этом случае меню будет расположено слева с помощью свойства всплытия. Еще зададим отображение меню и его содержимого:
nav { float: left; font-family: Bell Gothic Std, sans-serif; text-transform: uppercase; letter-spacing: 0.5em; font-size: x-small; }
Свойство всплытия сокращает длину элемента до длины его самого широко содержимого, в нашем случае это пункт меню “Privacy Statement”. Также добавлена рамка со всех сторон меню, кроме лева, чтобы визуально отделить его от содержимого.
Чтобы выделить ссылки и отделить их от фона, зададим им свойства с помощью селектора потомка:
nav a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); }
На этом этапе Вы заметите, что каждая ссылка по размеру совпадает с ее содержимым и что все ссылки находятся на одной высоте. Это происходит потому, что элемент ссылки по умолчанию отображается строчно, изменим это:
nav a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); display: block; }
Ссылки располагаются довольно близко друг к другу, так что добавим им внутренние отступы:
nav a { text-decoration: none; color: #fff; background-color: rgba(0, 0, 0, 0.7); display: block; padding: 0.75em; }
И зададим изменение внешнего вида при наведении указателя мыши:
nav a:hover { background-color: rgba(0, 0, 0, 0.9); }
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Бесплатный весенний вектор
-
Сайты, посвященные свадьбам
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58