Browse Source

Меню

Адаптивное, но не выпадает
Byzov_Alexandr 3 years ago
parent
commit
06da1a52c5
2 changed files with 132 additions and 0 deletions
  1. 41 0
      index.html
  2. 91 0
      main.css

+ 41 - 0
index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title>Какой-то там сайт</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+  <header>
+
+  </header>
+
+  <nav>
+      <ul class="top-menu">
+        <li><a href="#">НОВОСТИ</a></li>
+        <li><a href="#">РАСПИСАНИЕ ЗАНЯТИЙ</a></li>
+        <li><a href="#" >О КОЛЛЕДЖЕ</a>
+          <ul class="sub-menu">
+            <li><a href="#">УЧЕБНЫЕ ЗАВЕДЕНИЯ</a> </li>
+            <li><a href="#">ПРЕПОДОВАТЕЛИ</a> </li>
+            <li><a href="#">КОНТАКТЫ</a> </li>
+            <li><a href="#">ДОКУМЕНТЫ</a> </li>
+          </ul>
+        </li>
+        <li><a href="#">ВОЙТИ</a></li>
+        </ul>
+  </nav>
+
+  <main>
+
+  </main>
+  <footer>
+
+  </footer>
+</body>
+</html>

+ 91 - 0
main.css

@@ -0,0 +1,91 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+body{
+  font-family:"Arial";
+  font-size: 20pt;
+}
+h1{
+  width: 100%;
+  height: auto;
+  text-align: center;
+}
+nav{
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+nav a{
+  display: inline-block;
+  text-decoration: none;
+  color: black;
+  cursor: pointer;
+  line-height: 1;
+  text-align: center;
+}
+nav a:after{
+  display: block;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background-color: black;
+  content: "";
+  transition: width 0.3s ease-out;
+}
+nav a:hover:after,
+nav a:focus:after {
+  width: 100%;
+}
+nav ul{
+  list-style: none;
+  padding: 0;
+  margin: 0 auto;
+  width: 900px;
+  height: auto;
+}
+nav li{
+  text-align: center;
+  display: inline-block;
+  padding: 0 0 20px 20px;
+}
+.sub-menu {
+  transition: 0.3s ease;
+  display: none;
+}
+.sub-menu:hover li{
+  display: block;
+}
+
+/*Если экран меньше 800px то выполняются эти стили*/
+@media screen and (max-width: 800px) {
+  nav{
+    border-bottom: 0;
+  }
+  nav ul{
+    position: relative;
+    display: block;
+    height: auto;
+    left: 0;
+  }
+  nav a#pull{
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+  nav a#pull:after{
+    content: "";
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    position: absolute;
+
+  }
+  nav li{
+    height: auto;
+    text-align: left;
+    display: block;
+  }
+}
+