Пытался сделать меню: Есть топбар, с левого края я расположил 2 фотографии (img)(друг поверх друга)(с разным z-index) завёл эти фото в блок (div) добавил атрибут Onclick="моя js функция" для блока. По нажатию весь сайт исчезает)))
Привожу примерный код:
index.html, медиа тип стоит т.к. тестирую именно мобильную версию сайта:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style_mobile.css" media="screen and (max-width: 900px)">
<script src="script.js"></script>
</head>
<body>
<div id="TopBar">
<div id="Open_Main" onClick="open()"><img id="Open" src="menu-burger.jpg" /></div>
<div id="Close_Main" ><img id="Close" src="close.jpg" /></div>
</div>
</body>
</html>
теперь стили
style_mobile.css:
#TopBar
{
width: 100%;
height: 20%;
position: absolute;
top: 0%;
left: 0%;
background-color: gray;
}
#Open
{
visibility: visible;
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
}
#Open_Main
{
visibility: visible;
width: 25%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
z-index: 1;
}
#Close
{
visibility: visible;
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
}
#Close_Main
{
visibility: visible;
width: 25%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
z-index: 0;
}
теперь виновник торжества, javascript:
function open()
{
alert("Hello");
}
function close()
{
alert("Easy");
}
- так выглядит сам сайт
- это после того как я нажал
- это то что находится в js консольке
- ну а это код сайта
Простой
