Menu with HTML/CSS/Javascript?

StackOverflow https://stackoverflow.com/questions/23514316

  •  16-07-2023
  •  | 
  •  

Question

I want to make a menu which can be controled by mouse and/or by keyboard

so far I have this:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Menue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="drop_down.js"></script>
    <style type="text/css">
        @import "style3.css";
    </style>
</head>
<body> 
    <ul>
        <li tabindex="1"><a>A</a>
            <ul>
                <li><a>A.A</a></li>
                <li><a>A.B</a></li>
                <li><a>A.C</a></li>
                <li><a>A.D</a></li>
            </ul>
        </li>   
        <li tabindex="2"><a>B</a>
            <ul>
                <li><a>B.A</a></li>
                <li><a>B.B</a></li>
                <li><a>B.C</a></li>
                <li><a>B.D</a></li>
            </ul>
        </li>
        <li tabindex="3"><a>C</a>
            <ul>
                <li><a>C.A</a></li>
                <li><a>C.B</a></li>
                <li><a>C.C</a></li>
                <li><a>C.D</a></li>
            </ul>
        </li>
        <li tabindex="4"><a>D</a>
            <ul>
                <li><a>D.A</a></li>
                <li><a>D.B</a></li>
                <li><a>D.C</a></li>
                <li><a>D.D</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

style3.css

    ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:focus ul { display: block; }

The problem is I don't want to display the submenu on "focus". I want to display it with a click, and close it with another click, how can I solve that? This should also be possible with cursor keys(right/left opens, closes the submenu, up/down navigates through the menu)

Do I need javascript to do that? hope you can give me some hints

Was it helpful?

Solution

You can actually get a reasonable implementation just using CSS:

Demo Fiddle

HTML

<ul>
    <li>
        <input tabindex="1" id='menu1' type='Checkbox' />
        <label for='menu1'>menu1</label>
        <ul>
            <li><a>A.A</a>

            </li>
            <li><a>A.B</a>

            </li>
            <li><a>A.C</a>

            </li>
            <li><a>A.D</a>

            </li>
        </ul>
    </li>
    <li>
        <input tabindex="2" id='menu2' type='Checkbox' />
        <label for='menu2'>menu2</label>
        <ul>
            <li><a>A.A</a>

            </li>
            <li><a>A.B</a>

            </li>
            <li><a>A.C</a>

            </li>
            <li><a>A.D</a>

            </li>
        </ul>
    </li>
</ul>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
ul {
    list-style:none;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    position:relative;
}
body > ul {
    background:grey;
}
input[type=checkbox] {
    position:relative;
    opacity:0;
}
label {
    position:relative;
    left:-20px;
    top:0;
}
ul li > ul {
    display:none;
    position:absolute;
    background:lightgrey;
}
ul li input[type=checkbox]:checked ~ ul {
    display:block;
}
ul li ul li {
    display:block;
}

OTHER TIPS

You can use jQuery and add an event onclick :

$("#mymenu").click(function(event) {
   event.preventDefault();

   // *** Some treatment ** //

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top