I have a menu
http://lukesspot.com/indus_links/inner_menu.html
The hover effect on the middle menu item is nice.
How can I change that so it only dropsdown when clicked (instead of hover
(Is there a way with only css?)
Hi,
You can abuse the checkbox element to allow a clickable dropdown like this in pure css.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
display:inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
padding:10px 25px;
background-color: #ffffff;
border-right:1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
z-index: 1;
width:450px;
left:-999em;
top:-999em;
opacity:0;
transition:opacity .3s ease;
}
.dropdown-content .sub-menu {
padding:10px;
display:inline-grid;
}
.dropdown-content .sub-menu h4 {
margin-bottom: 5px;
font-family: verdana;
text-transform: uppercase;
color: gray;
}
/* Links inside the dropdown */
.dropdown-content a {
color: gray;
text-decoration: none;
display: block;
margin:5px;
font-family: Verdana;
text-transform:uppercase;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: silver;
}
#dropdown {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Show the dropdown menu on click */
#dropdown:checked ~ .dropdown-content{
left:0;
top:100%;
opacity:1;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
#dropdown:checked + .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="navbar"> <a href="platform_configuration.html" tabindex="0">Platform configuration</a>
<div class="dropdown">
<input id="dropdown" type="checkbox">
<label for="dropdown" class="dropbtn" tabindex="1">Systems</label>
<div class="dropdown-content"> <span class="sub-menu">
<h4>Systems</h4>
<a href="systems/blii-epca.html">blii epca</a> <a href="systems/cvcs.html">cvcs</a> <a href="systems/cnds.html">cnds</a> </span> <span class="sub-menu">
<h4>Networks</h4>
<a href="systems/networks/one-net-s.html">One-net (s)</a> <a href="systems/networks/one-net-u.html">One-net (u)</a> </span> <span class="sub-menu">
<h4>Comms</h4>
<a href="systems/comms/cbsp.html">cbsp</a> <a href="systems/comms/cv-tsc.html">cv-tsc</a> <a href="systems/comms/dmr.html">dmr</a> <a href="systems/comms/gbs.html">gbs</a> <a href="systems/comms/hfrg.html">hfrg</a> <a href="systems/comms/nmt.html">nmt</a> </span> <span class="sub-menu">
<h4>isr</h4>
<a href="systems/isr/ais.html">ais</a> <a href="systems/isr/dcsg-n.html">dcsg-n</a> <a href="systems/isr/jtt.html">jtt</a> </span> </div>
</div>
<a href="documents/index.html">Documents</a> </div>
</body>
</html>
(I left your html structure mainly unchanged but generally for navigation with dropdowns you would use a list and nested list structure)
This is called the checkbox hack so just google it for more information. There are issues in older mobiles but I think most these days support it.
However, rather than abuse the html it may be more appropriate to simply add a class with js on click and use that class to show the dropdown instead of hover.
Of course these days the separation of concerns is often blurred but generally behaviour is best accomplished with JS.
Disclaimer: Some of this stuff crosses the line of what you “should” do with CSS and introduces some bad semantics. It’s still wicked fun to play with and cool that it’s possible, but in general functional behavior should be controlled by JavaScript.
4 Likes
Hi there lurtnowski,
here is an example that uses the CSS target attribute…
<!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;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu {
display: flex;
}
#menu li {
margin: 0.75em 0.5em;
}
#menu > li:nth-of-type(2) {
position: relative;
}
#menu > li:nth-of-type(2) > a {
padding: 1em;
background-color: #4caf50;
color: #fff;
text-decoration: none;
}
#system {
position: absolute;
display: none;
width: 30em;
padding: 1em;
border: 1px solid #808080;
border-top: 0;
}
#system:target {
display: block;
}
#system ul {
float: left;
width: 25%;
}
#system li, #system li a {
color: #808080;
text-decoration: none;
}
#system ul li:nth-child(1) {
font-weight: bold;
}
#system > a {
float: left;
clear: both;
padding: 0.5em;
border: 1px dotted #808080;
color: #000;
text-decoration: none;
}
@media ( max-width:45em ){
#system {
width: 15em;
}
#system ul {
width: 50%;
margin-bottom: 1em;
}
#system > ul:nth-child(3){
clear: both;
}
}
@media ( max-width:30em ){
#system {
width: 7.5em;
}
#system ul {
width: 100%;
}
}
@media ( max-width:28em ){
#menu {
display: block;
}
#system {
position: static;
overflow: hidden;
}
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="platform_configuration.html">Platform configuration</a></li>
<li><a href="#system">System</a>
<div id="system">
<ul>
<li>Systems</li>
<li><a href="systems/blii-epca.html">blii epca</a></li>
<li><a href="systems/cvcs.html">cvcs</a></li>
<li><a href="systems/cnds.html">cnds</a></li>
</ul><ul>
<li>Networks</li>
<li><a href="systems/networks/one-net-s.html">One-net (s)</a></li>
<li><a href="systems/networks/one-net-u.html">One-net (u)</a></li>
</ul><ul>
<li>Comms</li>
<li><a href="systems/comms/cbsp.html">cbsp</a></li>
<li><a href="systems/comms/cv-tsc.html">cv-tsc</a></li>
<li><a href="systems/comms/dmr.html">dmr</a></li>
<li><a href="systems/comms/gbs.html">gbs</a></li>
<li><a href="systems/comms/hfrg.html">hfrg</a></li>
<li><a href="systems/comms/nmt.html">nmt</a></li>
</ul><ul>
<li>isr</li>
<li><a href="systems/isr/ais.html">ais</a></li>
<li><a href="systems/isr/dcsg-n.html">dcsg-n</a></li>
<li><a href="systems/isr/jtt.html">jtt</a></li>
</ul>
<a href="#menu">close</a>
</div>
</li>
<li><a href="documents/index.html">Documents</a></li>
</ul>
</body>
</html>
coothead
5 Likes
ok, got the menu functional but have a few style questions
How do I get the text (everything in #san_diego_heer to be more to the bottom, so theres like 15pn on top and 5px from the bottom (while inside the gray box)
and the mouseovers dont seem to go all the way down
You can see it at,
http://lukesspot.com/indus_links/header.html
Thanks
Luke, is your web site supposed to be responsive? Try reducing the width of your browser and you’ll see why I ask. Fixed widths or widths obtained with excessive padding are not responsive.
The height:100%'s that are peppered through your code generally do nothing. 100% of what? It would only work within a certain structure, such as if the height of its parent were fixed.
One can generally add vertical padding to a block or inline-block text element to give it additional height and extend its background color. The anchors could assigned vertical padding.
Maybe you can use your image editor to modify the screenshot to show us how it should look and behave.
You might want to validate the HTML as development progresses. There are a few simple errors already.
You’ve been visiting us for several years. Did you ever take a fundamental course in HTML and CSS?
EDIT: added screen shot.
ok, thanks. (Ill use the bootsrap grid system so that might help me make it responsive)
ok, I threw up bootstrap and will start putting it together
http://lukesspot.com/indus_links/header.html
You’ll need to read the bootstrap manual for your version thoroughly. 
1 Like
For the sake of one more pure CSS method I put together an example using the <detail> tag’s built in click API. I know it’s not supported in IE or Edge but I heard rumors of MS working on it for Edge.
It’s not fully responsive yet and needs a media query. When the last list item drops to it’s own line it places the dropdown on the far right side causing a horizontal scrollbar.
It could actually be fixed real easy by changing it to row wrap here, but it kinda looks bad with the sublists stacking.
details[open] div {
display:flex;
flex-flow:row nowrap;
position:absolute;
z-index:1;
top:auto;
left:-1px;
background:#eee;
border:1px solid black;
}
details-click-nav.html (2.9 KB)
I’d still like to see some progress made for something like the proposed <lt> tag to give us a heading for list items.
https://stevefaulkner.github.io/lt-element/
I could have used something like that here for the dropdown sub lists.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Click Dropdown List</title>
<style>
h1 {text-align:center}
ul {
margin:0;
padding:0;
list-style:none;
}
.navbar {
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
background:lightgray;
}
.navbar li {
flex:auto;
font-family:Verdana;
text-align:center;
text-transform:uppercase;
font-size:1.2rem;
position:relative;
border:1px solid black;
}
.navbar li:first-child {
padding:10px 5px;
font-weight:700;
}
.navbar a {
display:block;
box-sizing:border-box;
padding:10px 5px;
color:#000;
text-decoration:none;
}
.navbar a:hover, li summary:hover {
background-color:gray;
color:#eee;
}
summary {
/*list-style:none; /* use this to remove arrow marker*/
padding:10px 5px;
cursor:pointer;
}
details[open] div {
display:flex;
flex-flow:row nowrap;
position:absolute;
z-index:1;
top:auto;
left:-1px;
background:#eee;
border:1px solid black;
}
details[open] summary{
background:gray;
color:#eee;
}
.navbar div ul {
margin:8px;
}
.navbar li li {
font-size:.9rem;
border:none;
text-align:left;
}
.navbar li li:first-child {
font-size:1rem;
font-weight:700;
}
</style>
</head>
<body>
<h1>Detail & Summary - Click Dropdown List</h1>
<ul class="navbar">
<li>System</li>
<li><a href="platform_configuration.html" tabindex="0">Platform configuration</a></li>
<li tabindex="1">
<details>
<summary>Systems</summary>
<div>
<ul>
<li>Systems</li>
<li><a href="systems/blii-epca.html">blii epca</a></li>
<li><a href="systems/cvcs.html">cvcs</a></li>
<li><a href="systems/cnds.html">cnds</a></li>
</ul>
<ul>
<li>Networks</li>
<li><a href="systems/networks/one-net-s.html">One-net (s)</a></li>
<li><a href="systems/networks/one-net-u.html">One-net (u)</a></li>
</ul>
<ul>
<li>Comms</li>
<li><a href="systems/comms/cbsp.html">cbsp</a></li>
<li><a href="systems/comms/cv-tsc.html">cv-tsc</a></li>
<li><a href="systems/comms/dmr.html">dmr</a></li>
<li><a href="systems/comms/gbs.html">gbs</a></li>
<li><a href="systems/comms/hfrg.html">hfrg</a></li>
<li><a href="systems/comms/nmt.html">nmt</a></li>
</ul>
<ul>
<li>isr</li>
<li><a href="systems/isr/ais.html">ais</a></li>
<li><a href="systems/isr/dcsg-n.html">dcsg-n</a></li>
<li><a href="systems/isr/jtt.html">jtt</a></li>
</ul>
</div>
</details>
</li>
<li><a href="documents/index.html">Documents</a></li>
</ul>
</body>
</html>
1 Like
ok, did my best with bootstraps grid layout, have 1 problem though
http://lukesspot.com/indus_links/header.html
The left and right links dont seem to fill the container (#san_diego_navbar) and Im trying to find out how to make this.
I think I set up everything correctly and started anew and will add the dropdown when alls looking good
If your going to use bootstrap you need to understand how it interacts with the CSS you add to it.
It looks like you added a fixed height:33px to your anchors, as you can see that does no good. Now the text spills out when it wraps to a new line. Stop using fixed heights for text containers.
The problem I see is that you added display:table to the <div class="col wrapper"> and display:table-cell to the <div class="link">
div class="col wrapper" is a child of the bootstrap .row class which is set to display:flex so it is a flex item and should not be changed to display:table as you have done.
Remove all the table properties and add align-items: stretch; to your .row class
Stay on track with flex and don’t mingle table styles in with flex items, only do that when you break out of the flex rules. Such as with a div that is a child of a flex item.
A flex item is a child of a flex parent (an element with display:flex).
2 Likes
ok,thanks for the explanation. I made those changes
I last thing, im trying st style the links in the dropdown,
Why is the rule
.dropdown-content .sub-menu a {
color: black;
text-decoration: none;
display: block;
margin:5px;
font-family: Verdana;
text-transform:uppercase;
font-size:.7rem;
}
not being used instead?
Greater specificity rules apply.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.