| Kosten | Воскресенье, 10 Июня 2018, 02:44 | Сообщение 1 |
| В сети интернет можно разного стиля на горизонтальное меню найти, но этот больше понравился от плоского дизайн. Где также идут светло зеленые кнопки, что добавляют стилистику и безусловно смотрится совершенно по-другому, если бы они отсутствовали. В этом уроке мы будем кодировать при помощи CSS3 меню навигации, где есть возможность найти в пользовательском интерфейсе импрессионистов.
Какой больше тематической площадке оно подойдет, здесь безусловно все зависит от самого дизайн. Так как можно установить на блог, или есть сайты, где у них по умолчанию установлена фиксированная ширина. Это значит веб мастер самостоятельно может задать ширину навигаций, что лучше ставить под шапку, но все от стиля шаблона больше будет значение, где его лучше наблюдать.
С кнопками:
Шаг 1 - Разметка HTML
Здесь как видим, что выстроили неупорядоченный список, где присутствуют списка, которые по умолчанию привязаны к тегам, а точнее каждой выходящей ссылке. Если нужно новое под меню подменю, то добавляем еще один неупорядоченный список внутри списка.
Код <ul class="nysegazilom"> <li><a href="http://zornet.ru/">Главнаяd</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">Шаблоны</a> <ul> <li><a href="#" class="tugdsaew">Под меню</a></li> <li><a href="#" class="iryfsaxebsa">Под меню</a></li> <li><a href="#" class="tdsazertubcdsa">Под меню</a></li> </ul> </li> <li><a href="#">Дизайн</a></li> <li><a href="#">CSS</a></li> <li><a href="#">SEO</a></li> </ul>
Шаг 2 - CSS
Первое, что делать, это нужно удалить поля, также отступы, и здесь же идут границы с контурами, со всех элементов, что присутствуют в навигаций. Потом выставляем фиксированную ширину, это как сами видите, и безусловно высоту на самой навигаций. Что по закруглению углов, то по умолчанию они закруглены и выстроены в стилистике градиенты.
Код .nysegazilom,
.nysegazilom ul,
.nysegazilom li,
.nysegazilom a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.nysegazilom {
height: 40px;
width: 505px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nysegazilom li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.nysegazilom li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.nysegazilom li:first-child a { border-left: none; }
.nysegazilom li:last-child a{ border-right: none; }
.nysegazilom li:hover > a { color: #8fde62; }
.nysegazilom ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.nysegazilom li:hover > ul { opacity: 1; }
.nysegazilom ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.nysegazilom li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.nysegazilom ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.nysegazilom ul li:last-child a { border: none; }
.nysegazilom a.tugdsaew { background: url(http://zornet.ru/ABVUN/docs.png) no-repeat 6px center; }
.nysegazilom a.iryfsaxebsa { background: url(http://zornet.ru/ABVUN/bubble.png) no-repeat 6px center; }
.nysegazilom a.tdsazertubcdsa { background: url(http://zornet.ru/ABVUN/arrow.png) no-repeat 6px center; }
Вывод:
Здесь создали это чистое раскрывающееся меню CSS3. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях. Также не забудьте оставить отзыв и поделиться им со своими друзьями. Следуйте за нами, если вы хотите быть первым, кто узнает о последних уроках и статьях.
Демонстрация
| | Страна: (RU) |
| |
