Сегодня рассмотрим создание, довольно интересного и простенького меню на CSS3 со значками в металлическом стиле, с возможностью создания подменю.
Приступим:
Начнем с HTML файла. Вот полный код HTML нашего меню. Меню содержит только 1 уровень подменю, надеюсь, этого достаточно. Меню, основано на элементах списка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="container"> <ul id="nav"> <li><a href="#"><img src="images/t1.png" alt="" />Главная</a></li> <li><a class="sub" tabindex="1" href="#"><img src="images/t2.png" alt="" />HTML/CSS</a><img src="images/up.gif" alt="" /> <ul> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 1</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 2</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 3</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 4</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 5</a></li> </ul> </li> <li><a class="sub" tabindex="1" href="#"><img src="images/t3.png" alt="" />jQuery/JS</a><img src="images/up.gif" alt="" /> <ul> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 6</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 7</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 8</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 9</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 10</a></li> </ul> </li> <li><a href="#"><img src="images/t2.png" alt="" />PHP</a></li> <li><a href="#"><img src="images/t2.png" alt="" />MySQL</a></li> <li><a href="#"><img src="images/t2.png" alt="" />XSLT</a></li> </ul> </div> |
Теперь стили CSS меню. В исходниках есть два файла CSS: layout.css и menu.css. Первый файл (layout.css) содержит стили нашей тестовой страницы. Я не будем публиковать эти стили в статье, а рассмотрим мы menu.css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | #nav { border:3px solid #3e4547; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #nav, #nav ul { list-style:none; padding:0; width:200px; } #nav ul { position:relative; z-index:-1; } #nav li { position:relative; z-index:100; } #nav ul li { margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; } #nav li a { background-color:#d4d5d8; color:#000; display:block; font-size:12px; font-weight:bold; line-height:28px; outline:0; padding-left:15px; text-decoration:none; } #nav li a.sub { background:#d4d5d8 url("../images/down.gif") no-repeat; } #nav li a + img { cursor:pointer; display:none; height:28px; left:0; position:absolute; top:0; width:200px; } #nav li a img { border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; } #nav li a:hover { background-color:#bcbdc1; } #nav ul li a { background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:11px; line-height:22px; } #nav ul li a:hover { background-color:#ddd; color:#444; } #nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; margin-right:5px; vertical-align:middle; width:16px; } #nav ul li:nth-child(odd) a img { background:url("../images/bulb2.png") no-repeat; } #nav a.sub:focus { background:#bcbdc1; outline:0; } #nav a:focus ~ ul li { margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; } #nav a:focus + img, #nav a:active + img { display:block; } #nav a.sub:active { background:#bcbdc1; outline:0; } #nav a:active ~ ul li { margin-top:0; } #nav ul:hover { display:block; } |
Надеюсь это меню Вам пригодится! Не забывайте оставлять комментарии. Спасибо!
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.script-tutorials.com/css3-onclick-vertical-metal-menu/