responsive menu
This commit is contained in:
parent
3c8ef2d578
commit
a3a07a4e41
76
index.html
76
index.html
|
|
@ -8,41 +8,53 @@
|
|||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<script>0</script>
|
||||
<script>
|
||||
function menu_toggle() {
|
||||
var menu = document.getElementsByTagName('menu')[0];
|
||||
var img = document.querySelector('nav > img');
|
||||
if (menu.style.display == 'none') {
|
||||
menu.style.display = 'block';
|
||||
img.src = '/menu-close.png';
|
||||
} else {
|
||||
menu.style.display = 'none';
|
||||
img.src = '/menu-burger.png';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<h1>Bloub Bloub Studio</h1>
|
||||
<nav>
|
||||
<img id="menu-icon" src="/menu-burger.png" alt="menu icon" />
|
||||
<img src="/menu-burger.png" alt="menu icon" onclick="menu_toggle()" />
|
||||
<menu>
|
||||
<a href="/">
|
||||
<img src="/forum-logo.svg" alt="forum" />
|
||||
<h3>FORUM</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/steam-logo.png" alt="steam" />
|
||||
<h3>STEAM</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/youtube-logo.png" alt="youtube" />
|
||||
<h3>YOUTUBE</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/twitter-logo.png" alt="twitter" />
|
||||
<h3>TWITTER</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/email-logo.png" alt="email us" />
|
||||
<h3>EMAIL US</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/mailing-list-logo.png" alt="mailing list" />
|
||||
<h3>MAILING LIST</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/press-kit-logo.png" alt="press kit" />
|
||||
<h3>PRESS KIT</h3>
|
||||
</a>
|
||||
</menu>
|
||||
</nav>
|
||||
<menu>
|
||||
<a href="/">
|
||||
<img src="/forum-logo.svg" alt="forum" />
|
||||
<h3>FORUM</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/steam-logo.png" alt="steam" />
|
||||
<h3>STEAM</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/youtube-logo.png" alt="youtube" />
|
||||
<h3>TWITTER</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/twitter-logo.png" alt="twitter" />
|
||||
<h3>TWITTER</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/email-logo.png" alt="email us" />
|
||||
<h3>EMAIL US</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/mailing-list-logo.png" alt="mailing list" />
|
||||
<h3>MAILING LIST</h3>
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="/press-kit-logo.png" alt="press kit" />
|
||||
<h3>PRESS KIT</h3>
|
||||
</a>
|
||||
</menu>
|
||||
<main class="games">
|
||||
<a href="/game0.html" class="game">
|
||||
<img src="/miniature.png" alt="GAME 0" />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
33
style.css
33
style.css
|
|
@ -20,6 +20,8 @@ menu a {
|
|||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
menu a img {
|
||||
|
|
@ -36,32 +38,49 @@ menu a h3 {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
nav {
|
||||
nav > img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
padding: 0.69rem;
|
||||
margin-top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
}
|
||||
nav {
|
||||
menu a {
|
||||
display: flex;
|
||||
}
|
||||
menu a img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
menu a:hover img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transition: 0;
|
||||
}
|
||||
nav > img {
|
||||
display: block;
|
||||
color: red;
|
||||
margin: 1rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
margin-top: 1.5rem;
|
||||
width: 42px;
|
||||
}
|
||||
h1 {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
margin-top: 10px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
#notif {
|
||||
position: fixed;
|
||||
margin: 1rem;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Loading…
Reference in New Issue