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
Thanks Coothead.
I noticed that opening your menu adds an entry to the browser's history. If you go back immediately by using the browser's back button, the menu closes again.
This behavior causes problems in certain cases. For instance, if after opening your menu we go to another page (which may load as a response to a click on one of the menu links), and then go back again to your opened menu (by using the browser's history button) and finally close the menu by clicking on the close button, the 'other page' is removed from the history stack and cannot be reached any more.
Also, I noticed that the animation is not absolutely smooth.
This code does not have these problems.
Hi there molendijk,
I admire the way that you test code to destruction. ;)
This example addresses the points that your testing raised...
As for your "Javascript" example, I still maintain that yourCode:
<!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 {
min-height: 100%;
padding: 0.5em;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top,
#close {
position: fixed;
top: 1em;
right: 1.5em;
z-index: 1;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
cursor: pointer;
opacity: 1;
transition: 0.75s ease-in-out;
}
#top::before {
font-size: 2em;
content: '\02261';
}
#close {
z-index:0;
opacity: 0
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: absolute;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: 0.5em 0;
font-size: 1.25em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 3s ease-in-out;
}
#nav ul li:nth-of-type(1) a,
#nav ul li:nth-of-type(2) a {
font-style: oblique;
text-decoration: underline;
}
input {
position: absolute;
left: -999em;
}
#r1:checked ~ #top{
z-index: 0;
opacity: 0;
}
#r1:checked ~ #nav {
top: 0;
}
#r1:checked ~ #close{
z-index: 1;
opacity: 1;
}
#r1:checked ~ #nav ul a{
color: #fff;
}
#r1:checked ~ #content{
display: none;;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
</head>
<body>
<input id="r1" name="r" type="radio">
<label id="top" for="r1"></label>
<input id="r2" name="r" type="radio">
<label id="close" for="r2"></label>
<div id="nav">
<ul>
<li><a href="https://duckduckgo.com/">Duck Duck</a></li>
<li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</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>
<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><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>
coding methodology should take into account the needs of those
whom, for whatever reason, choose not to use it.
This is a guideline I find very useful to achieve that objective...
Progressive enhancement:
- You write your page content as if both CSS and JavaScript are off.
- You write CSS to style the page the way you want it to look when
JavaScript is off.- You write additional CSS to change the way you want the page to
look when JavaScript is turned on.- You write CSS for the way you want the page to look when specific
JavaScript commands are supported by the browser.- You add a few lines of JavaScript to the head of the page to add
the necessary classes to the html tag for the styles you wrote in
steps 3 and 4 to be applied.
coothead
Great, thanks!!
Just for the fun of it and also a bit out of curiosity I made a 'Coothead like' right side pull menu (just css) and a 'Molendijk like' menu that uses a mixture of css and js. I was hoping that my code would require less lines than Coothead's menu (and thus would beat Coothead in terms of Ockham's razor principle), but in vain. Both solutions require approx. the same 'amount' of code. I find my code more intuitive though, but that's probably because I am more of a js-person than a css-person.
Here's the css-only code:And here's my own code: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">
body {
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top, #close {//position hamburger icon and close button;
position: fixed;
top: 10px;
right: 17px;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
cursor: pointer;
}
/* code for hamburger icon; */
#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;
}
/* end code for hamburger icon; */
/* code for close button; */
#close {
display: none;
padding: 0 0.6em 0.18em;
}
#close::after {
font-size: 2em;
content: 'X';
}
/* end code for close button; */
#nav {// code for menu;
position: fixed;
width: 50%;
height: calc(100% - 65px);
top:0;
right: -100%;
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: 3s ease-in-out;
}
#nav ul li:nth-of-type(1) a,
#nav ul li:nth-of-type(2) a {
font-style: oblique;
text-decoration: underline;
}
input {// checking invisible radio buttons is used for opening and closing the menu;
display: none;
}
/* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu has 'right: 0' */
#radiobutton1:checked ~ #nav {
right:0;
}
/* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu and the close button have 'display: block' */
#radiobutton1:checked ~ #nav #close{
display: block;
}
/* when the first radio button (hidden) is checked via a click on the hambuger icon, the links in the menu have 'color: #fff' */
#radiobutton1:checked ~ #nav ul a{
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
</head>
<body>
<!-- Clicking on a label will toggle a checkbox -->
<label id="top" for="radiobutton1"></label>
<input id="radiobutton1" name="toggle_menu" type="radio">
<!-- Clicking on a label will toggle a checkbox -->
<div id="nav">
<label id="close" for="radiobutton2"></label>
<input id="radiobutton2" name="toggle_menu" type="radio">
<ul>
<li><a href="https://duckduckgo.com/">Duck Duck</a></li>
<li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</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>
<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><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>
EDIT: I forgot that chechu's main concern was to have a responsive menu. There are several ways to obtain this in the above codes. For ex. we could replace all instances of '50%' with '100%'.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">
body {
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#nav {
position: fixed;
width: 0;
height: calc(100% - 65px);
top:0;
right: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;
}
#top, #close {
position: fixed;
top: 1px;
right: 3px;
color: #fff;
cursor: pointer;
font-family: arial;
font-size: 36px;
}
#top {
padding: 0.2em;
background-color: #000;
border-radius: 0.1em;
}
#close {
padding: 0.5em;
padding-top: 0.2em;
visibility: hidden;
opacity: 0;
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: white;
text-align: center;
text-decoration: none;
}
#nav ul li:nth-of-type(1) a,
#nav ul li:nth-of-type(2) a {
font-style: oblique;
text-decoration: underline;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
<script>
function open_nav()
{
document.getElementById('close').style.opacity=1;
document.getElementById('close').style.visibility='visible';
document.getElementById('nav').style.width='50%';
}
function close_nav()
{
document.getElementById('close').style.opacity=0;
document.getElementById('close').style.visibility='hidden';
document.getElementById('nav').style.width=0;
}
</script>
</head>
<body>
<div id="top" onclick="open_nav()">≡</div>
<div id="nav">
<div id="close" onclick="close_nav()">X</div>
<ul>
<li><a href="https://duckduckgo.com/">Duck Duck</a></li>
<li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</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>
<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>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>
Quote:
Originally Posted by molendijk
You really need to use "media queries" to make your code responsive. ;)
coothead
Of course we need media queries. I use them all the time. Maybe I should have said: we could replace all instances of '50%' with '100%' for certain screen widths.Quote:
Originally Posted by coothead
This being said, let me come back to the css-js debate. I agree that css should be used for all specific cases where it is as powerful as js. But there are many situations where css alone can't do the job, see this menu, for instance.
Quote:
Originally Posted by molendijk
Oh ye of little faith, for your instance, CSS can certainly do the job. :D
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;
overflow-x: hidden;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top,
#close {
position: fixed;
top: 1em;
right: 1.5em;
z-index: 1;
padding: 0.5em;
background-color: #000;
border-radius: 0.5em;
color: #fff;
cursor: pointer;
transition: 1.5s ease-in-out;
}
#top::before {
font-size: 2em;
content: '\02261';
}
#close {
z-index: 0;
opacity: 0;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
right: -100%;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #808080;
background-image: linear-gradient( to bottom, #000, #808080 55%, #c0c0c0 );
transition: 1s 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: 0.5em 0;
font-size: 1.25em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 1.5s ease-in-out;
}
input {
position: absolute;
left: -999em;
}
#r1:checked ~ #top{
z-index: 0;
}
#r1:checked ~ #nav {
right: 0;
}
#r1:checked ~ #nav #close{
background-color: #f0f0f0;
color: #000;
opacity: 1;
}
#r1:checked ~ #nav ul a {
color: #fff;
}
#r1:checked ~ #content{
display: none;;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
</head>
<body>
<input id="r1" name="r" type="radio">
<label id="top" for="r1"></label>
<div id="nav">
<input id="r2" name="r" type="radio">
<label id="close" for="r2"></label>
<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>
</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><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>
coothead
Wherfore yf God so cloth the grasse, yt is to daye in ye felde, and tomorow shalbe cast in to the fornace, how moch more shal he clothe you, o ye of litle faith?Quote:
Originally Posted by coothead
Your code seems clever enough! This line: #r1:checked ~ #content{display: none;} seems crucial. It hides the windows's scrollbar when the menu button is clicked on, so it ensures that the scrollbar we see when the window is small enough is the menu's scrollbar.Quote:
Originally Posted by coothead
But now let's make the width of the navigation menu a bit smaller, say 70%: #nav {width: 70%}. Now your code has a problem, because the user will wonder where the page's content has gone and the page looks ugly.
This problems does not present itself when my code is used.
Hi there Arie,
why do you keep moving the goal posts?
I have no problem with your desire to use "JavaScript", as long as your use of
it meets the "Progressive enhancement" guidelines that I indicated in post #12.
Your code does not.
This means that with "JavaScript" disabled this menu, unfortunately, does not
appear to have one. :D
coothead
That's true, although not an issue since most people don't have javascript disabled..
It's just that your css-solutions surprised me all the time (in a positive sense) and I wondered how far you could go on the css-road.
So I thought that my previous post would either yield another interestig css-code on your part or lead to the conclusion that yes, sometimes, css 'can't do it'.
As I am not a dogmatic person, I had no desire at all to 'defend' javascript against css. That would be stupid. If that's what you thought, I'm sorry.
Hi there Arie,
I am sorry that I was unable to reply to your post earlier;
unfortunately I lost internet connection until 11am today.
Your moving of the goal posts does not aggravate me, on the
contrary it actually helps me improve my CSS skills.
Here is my amended code that that seems to address the problem
that was presented by your new goal post position...
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 {
overflow-x: hidden;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#wrapper {
position: relative;
min-height: 100%;
padding: 4.25em 0.5em 0.5em;
}
#top,
#close {
position: fixed;
top: 1em;
right: 1.5em;
z-index: 1;
padding: 0.5em;
background-color: #000;
border-radius: 0.5em;
color: #fff;
cursor: pointer;
transition: 1.5s ease-in-out;
}
#top::before {
font-size: 2em;
content: '\02261';
}
#close {
z-index: 0;
opacity: 0;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: absolute;
top: 0;
right: -100%;
width: 100%; width:50%; /* Arie's latest goal post position */
height: 100%;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #808080;
background-image: linear-gradient( to bottom, #000, #808080 55%, #c0c0c0 );
transition: 1s 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: 0.5em 0;
font-size: 1.25em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 1.5s ease-in-out;
}
input {
position: absolute;
left: -999em;
}
#r1:checked ~ #top{
z-index: 0;
}
#r1:checked ~ #nav {
right: 0;
}
#r1:checked ~ #nav #close{
background-color: #f0f0f0;
color: #000;
opacity: 1;
}
#r1:checked ~ #nav ul a {
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
@media ( max-width: 30em ) {
#nav li {
float: none;
width: 100%;
}
}
@media ( max-width: 20em ) {
#nav {
width: 100%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<input id="r1" name="r" type="radio">
<label id="top" for="r1"></label>
<div id="nav">
<input id="r2" name="r" type="radio">
<label id="close" for="r2"></label>
<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>
</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><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<!-- #wrapper --></div>
</body>
</html>
coothead
Thanks very much Coothead, that's fantastic. I thought this couldn't be done with css alone, but you proved it's possible.
No problem, you're very welcome. ;)
Thank you for pushing me along.
CSS has really moved forward with the introduction of CSS3
coothead