Split button drop down menus

programming web dev
1

Hey there Kirupans,

I was doing some searching for techniques to create split-button drop-down menus (ala digg.com and the YUI split-button widget). I came across this link:

http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

It’s a blog by Antonio Lupetti, and Mr. Lupetti does a solid job at creating the split button effect visually. I’m a bit more concerned with functionality and validity, however.

There are a couple of things I’d like to accomplish by building on the code he’s written, but being a very beginner with JavaScript, I’ll need some help from the community (you fine people!).

I figured using jQuery would be a good choice to remove any “onclick” or “onblurs” that would dirty up the code. Now, this is my first attempt at creating such a script in jQuery, but here’s what I’ve written.


<html>
    <head>
    	<title>Split Buttons</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/splitbuttons.css" />
        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        
        <script type="text/javascript">
		$(document).ready(function() {
			$("ul.menu").click(function () {
					$(this > child).toggle();
			});
		});
		</script>
        
    </head>

    
    <body>
        <div id="middlebar">
            <ul class="menu">
            <li><a href="#"> Products</a></li>
                <ul class="submenu">
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Boxes</a></li>
                    <li><a href="#">Containers</a></li>
                </ul>
            </ul>
            
            <ul class="menu">
            <li><a href="#"> Support</a></li>
                <ul class="submenu">
                    <li><a href="#">Domestic Customers</a></li>
                    <li><a href="#">International Customers</a></li>
                    <li><a href="#">Knowledge Base</a></li>
                </ul>
            </ul>

        </div>
    </body>
    
</html>

What I’m trying to accomplish is getting jQuery to look for any <ul> with the class “menu”, and when one is clicked, it should .toggle() the child <ul> with the class “submenu”. I’m simply not clear on the syntax. And yeah, I know the code above is probably a ways off…

This is the first step, and I’m sure I’ll have a couple more questions, but any insight would be much appreciated!

Thanks in advance,
Chris.

2

So, I’ve done some additional work in an attempt to separate the left and right elements of the split buttons. I’m a bit stuck, however. I’m not 100% sure on how to position these submenus.

Here’s a link to the page.

Here’s the CSS I’m working with:


#menubar {
    font-family: Arial, Helvetica, sans-serif;
    margin:50px;
}

li.top {
    display: block;
    float: left;
    margin-right: 25px;
}

li.top a.topLink {
    display: block;
    float: left;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    background-color: #66c;
    color: #fff;
    margin-right: 1px;
    padding: 5px 10px;
}

li.top a:hover {
    background-color: #99F;
}

li.top em {
    display: block;
    float: left;
    font-size: 10px;
    text-indent: -2000em;
    width: 20px;
    height: 26px;
    background-image: url('images/splitbuttons/down_arrow.png');
    background-repeat: no-repeat;
    background-position: 6px;
    background-color: #ffba00;
}

li.top em:hover {
    background-color: #FC3;
    cursor: pointer;
}

ul.sub{
display: block;
float: left;
position: absolute;
top: 77;
font-size: 12px;
font-weight: bold;
border: 1px solid #66c;
background-color: #fff;
z-index: 5000;
}

ul.sub li{
/*padding: 5px 10px;*/
border-bottom: 1px dotted #66c;
}

ul.sub li.last{
border-bottom: none;
}

ul.sub a {
color: #44c;
text-decoration: none;
display: block;
padding: 5px 10px;
}

ul.sub a:hover {
display: block;
color: #fff;
padding: 5px 10px;
background-color: #66c;
}

And here’s the markup:


    
    <div id="menubar">
        <ul class="splitmenu">
                    
            <li class="top">
                <a href="" class="topLink">Products</a><em>more</em>
            </li>
            <ul class="sub" id="sub01">
                    <li><a href="">Access Points / CPEs</a></li>

                    <li><a href="">Antennas</a></li>
                    <li><a href="">Accessories</a></li>
                    <li><a href="">CableBuilder&trade;</a></li>
                    <li class="last"><a href="">PDF Item List</a></li>
            </ul>     
            
            <li class="top">

                <a href="" class="topLink">Support</a><em>more</em>
            </li>
            <ul class="sub" id="sub02">
                    <li><a href="">Access Points / CPEs</a></li>
                    <li><a href="">Antennas</a></li>
                    <li><a href="">Accessories</a></li>

                    <li><a href="">CableBuilder&trade;</a></li>
                    <li class="last"><a href="">PDF Item List</a></li>
            </ul>
            
            <li class="top">
                <a href="" class="topLink">Corporate</a><em>more</em>
            </li>

            <ul class="sub" id="sub03">
                    <li><a href="">Access Points / CPEs</a></li>
                    <li><a href="">Antennas</a></li>
                    <li><a href="">Accessories</a></li>
                    <li><a href="">CableBuilder&trade;</a></li>
                    <li class="last"><a href="">PDF Item List</a></li>

            </ul>

        </ul>
    </div>

Any pointers are much appreciated. Thanks everyone!