menu
This commit is contained in:
Tolstoevsky
parent
aa88b36fc5
commit
7f3306dafc
96
css/base.css
96
css/base.css
@ -63,103 +63,7 @@ h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* nav */
|
||||
.nav {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav li {
|
||||
margin: 0 5px 10px 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
*display:inline; /* ie7 */
|
||||
}
|
||||
.nav a {
|
||||
padding: 3px 12px;
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
line-height: 100%;
|
||||
}
|
||||
.nav a:hover {
|
||||
color: #333;
|
||||
}
|
||||
.nav .current a {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* right nav */
|
||||
.nav.right ul {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* center nav */
|
||||
.nav.center ul {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.nav {
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
}
|
||||
.nav ul {
|
||||
width: 180px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: solid 1px #aaa;
|
||||
background: #000 url(images/icon-menu.png) no-repeat 10px 11px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.3);
|
||||
}
|
||||
.nav li {
|
||||
display: none; /* hide all <li> items */
|
||||
margin: 0;
|
||||
}
|
||||
.nav .current {
|
||||
display: block; /* show only current <li> item */
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
padding: 5px 5px 5px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
.nav .current a {
|
||||
background: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* on nav hover */
|
||||
.nav ul:hover {
|
||||
background-image: none;
|
||||
}
|
||||
.nav ul:hover li {
|
||||
display: block;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.nav ul:hover .current {
|
||||
background: url(images/icon-check.png) no-repeat 10px 7px;
|
||||
}
|
||||
|
||||
/* right nav */
|
||||
.nav.right ul {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* center nav */
|
||||
.nav.center ul {
|
||||
left: 50%;
|
||||
margin-left: -90px;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #999;
|
||||
|
||||
90
css/menu.css
Normal file
90
css/menu.css
Normal file
@ -0,0 +1,90 @@
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown .dropbtn {
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #bbb;
|
||||
background-color: #335;
|
||||
padding: 14px 16px;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
color: #bbb;
|
||||
background-color: #335;
|
||||
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav a:not(:first-child), .dropdown .dropbtn {
|
||||
display: none;
|
||||
}
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav.responsive {position: relative;}
|
||||
.topnav.responsive .icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.topnav.responsive .dropdown {float: none;}
|
||||
.topnav.responsive .dropdown-content {position: relative;}
|
||||
.topnav.responsive .dropdown .dropbtn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
29
index.html
29
index.html
@ -7,21 +7,30 @@
|
||||
<title>У вас всегда есть выбор!</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/menu.css">
|
||||
<link rel="stylesheet" href="css/popup.css">
|
||||
<script src="js/popup.js"></script>
|
||||
<script src="js/menu.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li class="current"><a href="index.html">❎ Главная</a></li>
|
||||
<li><a href="mail.html">📧 Почта</a></li>
|
||||
<li><a href="im.html">💬 Мессенджеры</a></li>
|
||||
<li><a href="social.html">💙 Соцсети</a></li>
|
||||
<li><a href="search.html">🔍 Поисковики</a></li>
|
||||
<li> <a href="extra.html">📓 Доп. материалы</a></li>
|
||||
<li><a href="info.html">🗒️ Подробнее</a></li>
|
||||
<div class="topnav" id="rtopnav">
|
||||
<a href="index.html" class="active">❎ Главная</a>
|
||||
<a href="mail.html">📧 Почта</a>
|
||||
<a href="im.html">💬 Мессенджеры</a>
|
||||
<a href="social.html">💙 Соцсети</a>
|
||||
<a href="search.html">🔍 Поисковики</a>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Ещё
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="extra.html">📓 Документы и агитматериалы</a>
|
||||
<a href="info.html">🗒️ Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">💡</a>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="textblock">
|
||||
<h2>Где я? О чём речь?</h2>
|
||||
|
||||
4
js/jquery.min.js
vendored
4
js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
8
js/menu.js
Normal file
8
js/menu.js
Normal file
@ -0,0 +1,8 @@
|
||||
function dropme() {
|
||||
var x = document.getElementById("rtopnav");
|
||||
if (x.className === "topnav") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "topnav";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user