Меню
Главная / Видео уроки / Выподающее меню для сайта css html js
Разделы

Выподающее меню для сайта css html js

Скачать шрифт из видео

HTML файл

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>Выподающее меню для сайта</title> </head> <body> <div id="block-body"> // в тегах header прописана наша шапка <header> // разметка для логотипа <div class="logo"> <a href="index.html"> <span class="use">USE</span>-<span class="web">WEB</span>.ru </a> <p>Разработка- это просто</p> </div> // разметка для нашего меню <div class="top-menu"> <ul> <li><a class="clickMenu" href="#">Темы <span class="down">▼</span> <span class="up">▲</span> </a></li> <li><a href="#">Видеоуроки</a></li> <li><a href="#">Об авторе</a></li> <li><a href="#">Обратная связь</a></li> </ul> // блок выподающего меню <div class="visibleMenu"> <div class="subMenu"> <p class="p-title">Уроки JQUERY</p> <ul> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> </ul> </div> <div class="subMenu"> <p class="p-title">Уроки по CSS</p> <ul> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> </ul> </div> <div class="subMenu"> <p class="p-title">Уроки по HTML</p> <ul> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> </ul> </div> <div class="subMenu"> <p class="p-title">Уроки по PHP</p> <ul> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Уроки</a></li> </ul> </div> </div> </div> // блок с авторизацией <div class="block-top-auth"> <p><a href="#">Вход</a></p> <p><a href="#">Регистрация</a></p> </div> </header> <div id="block-content"></div> </div> </body> </html>

CSS файл

@font-face { font-family: "Exo2-Medium"; src: url("../fonts/Exo2-Medium.ttf"); } @font-face { font-family: "Exo2-MediumItalic"; src: url("../fonts/Exo2-MediumItalic.ttf"); } @font-face { font-family: "Exo2-Bold"; src: url("../fonts/Exo2-Bold.ttf"); } @font-face { font-family: "Exo2-BoldItalic"; src: url("../fonts/Exo2-BoldItalic.ttf"); } * { margin: 0; padding: 0; } body { background-image: url("../img/white-needle.png"); } #block-body { width: 1035px; margin: 5px auto; height: auto; } header { width: 1035px; height: 80px; background-color: black; } #block-content { width: 1035px; height: auto; min-height: 500px; } .logo { width: 200px; float: left; height: 80px; } .logo a { display: block; margin-left: 15px; margin-top: 10px; font-family: "Exo2-Bold", sans-serif; font-size: 28px; color: #b2aeb2; text-decoration: none; cursor: pointer; } .use { color: #aa064b; } .web { color: #429595; } .logo p { margin-left: 20px; margin-top: 2px; margin-bottom: 5px; font-family: "Exo2-Medium", sans-serif; font-size: 13px; color: white; } .top-menu { width: 685px; height: 80px; float: left; } .top-menu ul li { list-style: none; float: left; text-align: center; } .top-menu ul li a { display: block; width: 171px; text-decoration: none; font-family: "Exo2-Medium", sans-serif; font-size: 17px; color: white; height: 55px; padding-top: 25px; cursor: pointer; } .top-menu ul li a:hover { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition:all 0.5s ease; -moz-transition:all 0.5s ease; background: #00ADE4; } .block-top-auth { width: 100px; float: left; margin-left: 40px; height: 80px; } .block-top-auth p { margin-top: 12px; text-align: center; margin-bottom: 8px; } .block-top-auth a { text-decoration: none; color: white; font-family: "Exo2-Medium", sans-serif; font-size: 15px; text-decoration: underline; cursor: pointer; } .block-top-auth a:hover { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition:all 0.5s ease; -moz-transition:all 0.5s ease; color: #00ADE4; } .visibleMenu { width: 685px; height: 220px; margin-top: 80px; background: black; opacity: 0.8; display: none; } .subMenu { float: left; margin-left: 30px; } .subMenu p { font-family: "Exo2-Bold", sans-serif; font-size: 19px; color: white; text-align: center; margin-bottom: 20px; margin-top: 10px; } .subMenu ul { border-top: 2px solid white; } .subMenu ul li { float: none; list-style: none; text-align: center; margin-bottom: 5px; } .subMenu ul li a { display: block; width: 135px; height: 20px; text-decoration: none; font-family: "Exo2-Medium", sans-serif; font-size: 17px; color: white; cursor: pointer; padding-top: 3px; } .up, .down { font-size: 12px; }

JS файл

$(document).ready(function(){ $(".up").hide(); $(".clickMenu").click(function(){ $(".visibleMenu").toggle(500); $(".up").toggle(); $(".down").toggle(); }); });

  • Статьи раздела
  • Комментарии
Вставить код
Чтобы оставлять комментарии авторизуйтесь  или  зарегистрируйтесь

Комментарии к статье

    Комментарии отсутствуют

Авторизация

Забыли пароль?

Восстановление пароля