Pure CSS drop-down menu

HTML & CSS
1

Hi,

I have a question about the “pure CSS drop-down menu” on pages 126 - 134. It works great and I am very appreciative to have found it. On page 127, Figure 4.25, it shows the “Starters”, “Main courses” and “Desserts” going across the page horizontally. Is it possible for you to show me how to create this drop-down menu where “Starters”, “Main courses” and “Desserts” are, instead, listed vertically on the page where “Starters” is at the top of the list and “Desserts” is on the bottom?

Thanks for your time

2

I’m working on a newer version that will skip using innerHTML, though I suspect that will make the script unnecessarily large AND slower to set up since it will have to do a nodeclone.

3

Very helpful, I’ve been looking for something similar to this. Thanks!

4

Oh sorry…the book is:The CSS Anthology, 2nd edition - question; ISBN 978-0-9758419-8-3

Thanks

5

No problem - I know you don’t like it.

You can use my script if desired.
http://battletech.hopto.org/html_tutorials/accordion/

I think I may borrow that also :slight_smile:

6

Which if you have the least bit of common sense you’ll mind the fat bloated ******** overhead that only complete ****tards use.

Sorry, pet peeve.

You can use my script if desired.
http://battletech.hopto.org/html_tutorials/accordion/

It auto-hooks by ID, and if you strip out the over-the-top commenting I made to explain how it works it’s 4k… (7k with comments) – beats the crap out of throwing 100+K at it for nothing. (much less the jerky multi-timer issue their approach results in)

7

Hi,

I tried the code and it worked great thanks :slight_smile: but I don’t think I explained myself well… I had considered the code in the book to be kind of an ‘accordion style’ & forgot to mention it before.

I had also looked in the ‘JavaScript The Missing Manual’, ISBN: 970-0-596-51589-8 book prior to looking in the CSS book - even though I really didn’t want to use JavaScript - and found that I really did like the accordion style. However, I was having some difficulty with the JavaScript book…I went to the JavaScript book’s errata section on its website and it still didn’t work out for me…sorry about the mixup

Thanks again for your time

8

Hi meesh. What book are you referring to?

9

Hmmm, that’s a shame. So I guess if you use this example, be aware that it will only work 99.999999% of users. :lol:

10

Wow, that particular example is buggy as all hell in Opera 10.6 – seems to refuse to erase everything when you un-hover/close an element.

11

Stu Nichols has a few of these, some quite simple, like the tree frog menu:
http://www.stunicholls.com/menu/tree_frog_vertical.html

12

CSS alone can’t do a real accordion effect (discounting css3 animations of course) and you would need some Javascript to accomplish it. If you can’t program it yourself then you could use one of the [URL=“http://docs.jquery.com/UI/Accordion”]jquery accordions assuming you don’t mind the overheads of the library.

13

Hi,

I don’t have that book but to make a vertical stacked dropdown menu where the flyout goes to the right you just have to move the menu far enough left so that it clears the first main level. The rest of the code is much the same.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css">
body {
    font: normal 11px verdana;
}
ul#nav, ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#nav li {
    position: relative;
    float: left;
    width:149px;
    clear:left;
}
#nav li ul {
    position: absolute;
    left: 0; 
    top: auto;
    margin-left:-999em;
}
#nav li  li{width:149px;}

/* Styles for Menu Items */
ul#nav li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fffccc; /* IE6 likes a background here */
    padding: 5px;
    border: 1px solid #ccc;
}
/* commented backslash mac hiding hack \\*/ 
* html ul#nav li a {
    height:1&#37;
}
/* end hack */ 

/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    color: #fff;
    background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    color: #777;
    background: #fffccc;
}
#nav li ul li a {
    padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    margin-left:149px;
    top:0;
}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>

            <li><a href="#">History</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Offices</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a>
        <ul>

            <li><a href="#">Web Design</a></li>
            <li><a href="#">Internet Marketing</a></li>
            <li><a href="#">testing ></a>
                <ul>
                    <li><a href="#">test 1</a></li>
                    <li><a href="#">test 2</a></li>

                    <li><a href="#">test 3</a></li>
                    <li><a href="#">testingx ></a>
                        <ul>
                            <li><a href="#">test 1</a></li>
                            <li><a href="#">test 2</a></li>
                            <li><a href="#">test 3</a></li>

                            <li><a href="#">test 4</a></li>
                            <li><a href="#">test 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">test 4</a></li>
                    <li><a href="#">test 5</a></li>
                </ul>

            </li>
            <li><a href="#">Hosting</a></li>
            <li><a href="#">Domain Names</a></li>
            <li><a href="#">Broadband</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>

        <ul>
            <li><a href="#">United Kingdom</a></li>
            <li><a href="#">France</a></li>
            <li><a href="#">USA</a></li>
            <li><a href="#">Australia</a></li>
        </ul>
    </li>

</ul>
</body>
</html>