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">
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<h1>Bloub Bloub Studio</h1>
|
||||||
<nav>
|
<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>
|
</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">
|
<main class="games">
|
||||||
<a href="/game0.html" class="game">
|
<a href="/game0.html" class="game">
|
||||||
<img src="/miniature.png" alt="GAME 0" />
|
<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-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
menu a img {
|
menu a img {
|
||||||
|
|
@ -36,32 +38,49 @@ menu a h3 {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav > img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
menu {
|
menu {
|
||||||
display: none;
|
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;
|
display: block;
|
||||||
color: red;
|
color: red;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
width: 42px;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
padding-right: 50px;
|
padding-right: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-icon {
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notif {
|
#notif {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Loading…
Reference in New Issue