mirror of
https://gitea.phreedom.club/tolstoevsky/fedi.git
synced 2024-11-27 05:41:28 +00:00
menu
This commit is contained in:
Tolstoevsky
parent
aa88b36fc5
commit
7f3306dafc
96
css/base.css
96
css/base.css
|
|
@ -63,102 +63,6 @@ h3 {
|
||||||
font-size: 1.1em;
|
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 {
|
h1, h2, h3 {
|
||||||
|
|
|
||||||
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>
|
<title>У вас всегда есть выбор!</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="css/base.css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/menu.css">
|
||||||
<link rel="stylesheet" href="css/popup.css">
|
<link rel="stylesheet" href="css/popup.css">
|
||||||
<script src="js/popup.js"></script>
|
<script src="js/popup.js"></script>
|
||||||
|
<script src="js/menu.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="nav">
|
<div class="topnav" id="rtopnav">
|
||||||
<ul>
|
<a href="index.html" class="active">❎ Главная</a>
|
||||||
<li class="current"><a href="index.html">❎ Главная</a></li>
|
<a href="mail.html">📧 Почта</a>
|
||||||
<li><a href="mail.html">📧 Почта</a></li>
|
<a href="im.html">💬 Мессенджеры</a>
|
||||||
<li><a href="im.html">💬 Мессенджеры</a></li>
|
<a href="social.html">💙 Соцсети</a>
|
||||||
<li><a href="social.html">💙 Соцсети</a></li>
|
<a href="search.html">🔍 Поисковики</a>
|
||||||
<li><a href="search.html">🔍 Поисковики</a></li>
|
<div class="dropdown">
|
||||||
<li> <a href="extra.html">📓 Доп. материалы</a></li>
|
<button class="dropbtn">Ещё
|
||||||
<li><a href="info.html">🗒️ Подробнее</a></li>
|
<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>
|
</nav>
|
||||||
<div class="textblock">
|
<div class="textblock">
|
||||||
<h2>Где я? О чём речь?</h2>
|
<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 a new issue