Создание сайта-визитки. Создание выпадающего меню
В этом уроке мы продолжим работать с нашим сайтом, который мы начали создавать на прошлом уроке — мы создадим меню сайта и выпадающее меню. Создать выпадающее меню можно огромным количеством способов. Я показал один из самых простых и понятных. Это не означает, что можно и нужно делать выпадающее меню только таким способом. Все зависит от сложности меню и вашей фантазии.
Код урока (HTML)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<!--<link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>-->
</head>
<body>
<header>
<div class="wrapperHeader">
<div class="logo">
<img src="http://kamil-abzalov.ru/wp-content/themes/milleniumSecond/img/logo.png" alt="">
</div>
<div class="phone">
<p>123-45-67</p>
</div>
<div class="search">
<form>
<input type="text"/>
<input type="submit">
</form>
</div>
</div>
<nav id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a>
<ul class="submenu">
<li><a href="#">Наша команда</a></li>
<li><a href="#">Новости</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus facilis est nam, expedita eaque. Ipsum vero sapiente, tenetur voluptas aliquid accusantium. Molestiae distinctio ratione commodi! Vel officiis laborum temporibus nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maxime vel molestias reprehenderit. Nihil hic reprehenderit asperiores omnis assumenda voluptatibus modi saepe, tenetur necessitatibus error placeat, fugit, odio impedit. Eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quae sunt, laboriosam molestias deleniti nam! Enim exercitationem dicta maxime perferendis sit accusamus aliquid quisquam debitis facilis velit, dolorem libero, fugiat.
</div>
<footer>
</footer>
</body>
</html>Код урока (CSS)
@import url("anahit/anahit.css");
body {
font-family: "AMG Anahi", "Arial", sans-serif;
font-size: 16px;
}
header {
box-shadow: 0px 0px 15px 2px #202020;
}
.wrapperHeader {
background-color: #7c4dff;
overflow: hidden;
}
nav {
width: 100%;
}
#menu ul {
padding-top: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline-block;
position: relative;
}
#menu ul li a {
color: inherit;
text-decoration: none;
font-size: 16px;
display: block;
padding: 0 10px;
line-height: 40px;
}
#menu ul li:hover .submenu{
display: block;
}
.submenu {
position: absolute;
display: none;
background-color: #fff;
padding: 0;
border: 1px solid #e1e1e1;
}
.submenu li {
min-width: 170px;
}
.submenu li:hover {
background-color: #7c4dff;
color: #fff;
}
.logo, .phone, .search {
float: left;
width: 33%;
}
.phone p {
color: #fff;
font-size: 25px;
margin-top: 20px;
}
.search form {
margin-top: 25px;
}
0 Comments