Printable View
Hey all,
As I would love to get this type of menu: http://www.themezaa.com/html/brando/architecture.html#, I was searching around and found this: https://www.w3schools.com/howto/tryi...how_js_sidenav.
Also nice, but it is not responsive.
So, hence my question: who can help me out finding the code of the first link's menu, please?
Or make the second link responsive?
EDIT: second link is not only not responsive, the js is not working on mobile.
Thanks.
Why do you say that the w3schools-menu is not responsive? The only problem I can see is that the close button is not visible anymore when the window gets very small, but that's because the demo is in a separate iframe whose width is only 50% of the window's width. There's no issue when the menu is placed in a main window.
This might also be helpful.
Hi there chechu,
here is a CSS example for you to try...
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html {
box-sizing: border-box;
}
*,*::before,
*::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top,
#close {
position: fixed;
display: inline-block;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
text-decoration: none;
}
#top::before,
#top::after {
display: block;
padding: 0.15em 0.75em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
content: '';
}
#top::after {
border-top: 0;
}
#close {
position: absolute;
top: 0.5em;
right: 0.5em;
padding: 0 0.6em 0.18em;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: fixed;
width: 94%;
max-width: 18em;
top: 0;
left: -18.5em;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
transition: 0.75s ease-in-out;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav ul a {
display: block;
margin: 0.25em 0;
color: #000;
text-indent: 1em;
text-decoration: none;
}
#nav:target {
left: 0;
}
</style>
</head>
<body>
<a id="top" href="#nav"></a>
<div id="nav">
<a id="close" href="#top"></a>
<ul>
<li><a href="about.html">About</a><li>
<li><a href="services.html">Service</a><li>
<li><a href="projects.html">Projects</a><li>
<li><a href="people.html">People</a><li>
<li><a href="blog.html">Blog</a><li>
<li><a href="contact.html">Contact</a><li>
</ul>
</div>
</body>
</html>
coothead
Thanks guys, just started to play around with this menu instead :http://www.dynamicdrive.com/dynamici...-icon-menu.htm
That works well, so I'm not going to break my head on this one no more.
Thanks anyway!
Hi there chechu,
are you aware that the script of your choice does not have
a fall-back for those users who have javascript disabled?
And while I am here, have you noticed a solution has been
posted to your other recent thread?...
change image with non-conformistic forms
coothead
Are there people surfing the web having javascript disabled? Don't think they will have a good surfing experience, as most sites have js in it.
The W3schools code didn't work on my mobile, but the DD one does.
You can't code right for everyone, but I guess that DD menu is getting close to what I needed.
Quote:
Originally Posted by chechu
That old script can easily be done with CSS...
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html,body {
height: 100%;
margin: 0;
box-sizing: border-box;
}
*,*::before,
*::after {
box-sizing: inherit;
}
body {
padding: 0.5em;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top,
#close {
position: fixed;
top: 0.75em;
right: 1em;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
text-decoration: none;
}
#top::before,
#top::after {
display: block;
padding: 0.15em 0.75em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
content: '';
}
#top::after {
border-top: 0;
}
#close {
position: absolute;
padding: 0 0.6em 0.18em;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: fixed;
display: table;
width: 100%;
height: 100%;
top: -100%;
left: 0;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #800;
background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
transition: 0.75s ease-in-out;
}
#nav ul {
display: table-cell;
padding: 0;
margin: 0 auto;
list-style: none;
vertical-align: middle;
}
#nav li {
float: left;
width: 50%;
}
#nav ul a {
display: block;
margin: 1em 0;
font-size: 1.5em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 2s ease-in-out;
}
#nav:target {
top: 0;
}
#nav:target ul a{
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
background-color: #fff;
}
</style>
</head>
<body>
<a id="top" href="#nav"></a>
<div id="nav">
<a id="close" href="#top"></a>
<ul>
<li><a href="about.html">About</a><li>
<li><a href="services.html">Service</a><li>
<li><a href="projects.html">Projects</a><li>
<li><a href="people.html">People</a><li>
<li><a href="blog.html">Blog</a><li>
<li><a href="contact.html">Contact</a><li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
</body>
</html>
coothead
Great, thanks.
Will try it out!
Thanks Coothead, very nice.
There might be a problem though. If the menu's content is such that the height of the menu exceeds the height of the window, the items at the bottom of the menu will be inaccessible. Do you have a CSS solution for that too?
Quote:
Originally Posted by molendijk
I certainly do.
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html,body {
height: 100%;
margin: 0;
box-sizing: border-box;
}
*,*::before,
*::after {
box-sizing: inherit;
}
body {
padding: 0.5em;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top,
#close {
position: fixed;
top: 1em;
right: 1.5em;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
text-decoration: none;
}
#top::before,
#top::after {
display: block;
padding: 0.15em 0.75em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
content: '';
}
#top::after {
border-top: 0;
}
#close {
display: none;
padding: 0 0.6em 0.18em;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: fixed;
width: 100%;
height: 100%;
top: -100%;
left: 0;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #800;
background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
overflow: auto;
transition: 0.75s ease-in-out;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
vertical-align: middle;
}
#nav li {
float: left;
width: 50%;
}
#nav ul a {
display: block;
margin: 1em 0;
font-size: 1.5em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 2s ease-in-out;
}
#nav:target {
top: 0;
}
#nav:target #close{
display: block;
}
#nav:target ul a{
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
background-color: #fff;
}
</style>
</head>
<body>
<a id="top" href="#nav"></a>
<div id="nav">
<a id="close" href="#top"></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>
coothead