3 replies [Last post]
SJTR
SJTR's picture
Offline
newbie
Last seen: 6 years 1 week ago
Timezone: GMT+2
Joined: 2014-05-05
Posts: 5
Points: 8

Hi all.

I currently have a hover dropdown menu but want it to be clickable. This is what I currently have;

http://jsfiddle.net/0bnz4mog/

So that the dropdown will only come when you click on the top button.

Want to keep it simple and just CSS, is this possible?

This guy created it but can't figure out how he did it. http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html

Thanks in advance for any help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

onclick is behavior

CSS does not support an onclick action. You will need javascript. CSS deals with states, thus while hovering, or while a link has been visited, or while the enter key is pressed.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dirtslayer
dirtslayer's picture
Offline
newbie
canada
Last seen: 5 years 52 weeks ago
canada
Timezone: GMT-6
Joined: 2014-09-19
Posts: 7
Points: 7

css onclick menu

i looked at the link you provided and figured out how he made the menu.

it is a pure css solution, no javascript

he places the sub menu off the screen and moves them on the a:active and a:focus

the code here is buggy in jsfiddle, it works if you create the files yourself and open with firefox,
this is the code from the link but i took out a bunch of extra goodies

html:

<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="drop.css">
</head>
<body>
 
<div id="menu">
    <ul class "levelone" >
      <li class="fly"><a href="#">File</a>
        <ul class="dropdown d1">
          <li><a href="#">Menu item 1</a>  </li>
          <li><a href="#">Menu item 2</a>  </li>
        </ul>        
      </li>
 
      <li class="fly"><a href="#">Tools</a>
      	<ul class="dropdown d2">
   			<li><a href="#">Menu item 3</a>  </li>
        	<li><a href="#">Menu item 4</a>  </li>
      	</ul>
      </li>
      <br/>
    </ul>
 
</div>
</body>

drop.css
#menu {position:relative; z-index:500;}
#menu ul {padding:0; margin:0; list-style:none; }
#menu ul ul {position:absolute; left:-9999px; width:150px; top:45px;}
#menu ul ul ul {position:absolute; left:-9999px; width:150px; top:-5px;}
 
#menu ul li {background:#fff; margin-right:5px; float:left;position:relative;}
#menu ul li a {display:block; float:left;  text-decoration:none;  }
 
#menu ul ul li {margin:0;}
#menu ul ul li a {width:105px;}
 
#menu ul li a:active + ul.dropdown {left:-5px}
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:-5px}
 
#menu ul li ul.dropdown:hover {left:-5px}
 
#menu ul {
	font-size: 20px;
}
#menu ul ul {
		font-size: 12px;
}
 
#menu {
	background-color: #000;
	width: 960px;
	vertical-align: top;
	height: 50px;
}
 
#menu ul{
	padding: 0;
	list-style: none;
	margin: 0px;
}
 
#menu ul li{
	width: 100px;
	background-color: black;
	line-height: 50;
	vertical-align: center;
}
 
#menu ul li {
	position: relative;
}
 
#menu ul li a{
	display: block;
	color: #FFF;
	background: #000;
	text-decoration: none;
	line-height: 50px;
	vertical-align: center;
}
 
#menu ul li a:hover{
     color: #FFF;
     background: #333;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

IE to screw the pooch

IE has mostly failed to properly support :focus. Which explains why the (more) robust solution has been to depend on the hover state or the onclick event handler in javascript.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.