Menu
I know this has been up a lot of times before, but I couldn't find any solution in my specific case.
I've got a navigation bar and I want the whole <li>'s to be "linked" or "clickable" if you will. Now only the <a> (and the <div>'s I've fiddled with) is "clickable".
I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.
The source can be found here: http://jsfiddle.net/prplxr/BrcZK/
<!DOCTYPE html>
<html>
<head>
<title>asdf</title>
</head>
<body>
<div id="wrapper">
<div id="menu">
<div id="innermenu">
<ul id="menulist">
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Do anyone have a neat solution to this?
Thank you in advance!
665
We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable.
Using #top or #bottom The following examples use #top and #bottom with the <a> tag and href attribute to link to that section of the page. This method is similar to using "id," but you don't have to pick a specific element. Click "Top" or "Bottom" in the Results section to see what happens.
<div>s. <a> tags to have display: block
<li> to the <a>. <li>s will need to be either floated or display: inline-block
Example: http://jsfiddle.net/8yQ57/
179
Just use "display block" for link.
ul {
display: block;
list-style-type: none;
}
li {
display: inline-block; /* or block with float left */
/* margin HERE! */
}
li a {
display: block;
/* padding and border HERE! */
}
Here's the example http://jsfiddle.net/TWFwA/ :)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
