|
HTML, css, script, MySQL :: script
Меню
<style>
nav a {
display: inline-block;
width: 25%; /* 4 пункта меню, то есть 100%/4 */
background: rgb(46,95,122); /* фон пунктов меню */
text-decoration: none;
}
nav a:hover {
background: rgb(96,145,172); /* фон пунктов при наведении */
}
nav a, nav:before {
height: 30px;
line-height: 30px; /* высота пунктов меню, line-height = height */
color: #fff;
text-align: center;
cursor: pointer; /* курсор в виде руки, обязательно для Opera Mini */
}
@media (max-width: 500px) { /* для экранов, меньше 500px, см про адаптивную вёрстку */
nav {
position: relative;
}
nav:before {
content: "меню";
display: block;
background: rgb(6,55,82); /* цвет фона кнопки */
}
nav div {
display: none;
position: absolute; /* меню находится поверх контента */
left: 0;
right: 0;
}
nav a {
width: 100%; /* пункт меню растягивается на всю ширину блока */
}
}
</style>
<nav><div><a href="#">Первый пункт</a><br><a href="#">Второй пункт</a><br><a href="#">Третий пункт</a><br><a href="#">Четвёртый пункт</a></div></nav>
<script>
var nav = document.getElementsByTagName('nav');
mynav();
function mynav() {
var width = window.innerWidth || document.documentElement.clientWidth;
if (500 >= width) {
nav[0].children[0].style.display = 'none';
nav[0].onclick = function(event) {
event = event || window.event;
var t = event.target || event.srcElement;
if (t != this) { return true; }
this.children[0].style.display = this.children[0].style.display === 'none' ? 'block' : 'none';
}
}
}
window.onresize = function() {
mynav();
var width = window.innerWidth || document.documentElement.clientWidth;
if (500 < width) {
nav[0].children[0].style.display = 'block';
}
}
</script>
|
|
|
Правила проекта