WhiteBoard Coder: Pull down menu with pure CSS

I just completed a major UI overhaul of my website. As part of the overhaul I added a pull down menu at the top right of the sight. I was trying to get a similar effect to this web site http://www.virtuallyghetto.com/ [1], and I was trying to do it with pure CSS.

The most helpful site in how to accomplish this with pure CSS I found was http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ [2]. The demo page from csswizardy can be seen at http://csswizardry.com/demos/css-dropdown/ [3]

My Solution

Here is what I came up with (which you can see at this site)

I am not going to show how to do it in blogger.com but rather just a simple web page and you can take if from there.

First create the html

> vi index.html

And place the following in it.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Pure CSS Dropdown Menus</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'/>
</head>

<body>

<div class='wbc-pages'>
    <ul id="nav">
        <li><a href='http://www.whiteboardcoder.com/'>

About</a></li>
<li class="ul-menu">

                    My Hardware</a>
            <ul class='sub-menu'>
                <li><a href="'http://www.whiteboardcoder.com">

                          ESXi Server</a></li>
                <li><a href="'http://www.whiteboardcoder.com">
                         Dev Machines</a></li>
                <li><a href="'http://www.whiteboardcoder.com">
                        Home Machines</a></li>
            </ul>
        </li>
        <li><a href='http://www.whiteboardcoder.com/'>
            AWS/ESXi</a></li>
        <li><a href="http://www.whiteboardcoder.com/">
            Developer Tools</a></li>
        <li><a href='http://www.whiteboardcoder.com/' >
            Current Reading</a></li>
    </ul>
</div>
</body>
</html>

Now the CSS

Create the css file

> vi style.css

With the following in it

body {
    font-family: 'Roboto Slab', serif;

    background-color: #f7f7f7;
}

.wbc-pages{
    color: #555555;
    position:absolute;
    top:0px;
    right:0px;
    margin-right:100px;
    margin-top:40px;

    border:red solid 2px;
}

.wbc-pages ul{
    list-style:none;
    margin-bottom:10px;
    float:left; /* Clear floats */
}

.wbc-pages ul li{
    float:left;
    position:relative;

    padding:10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    height: 21px;
    line-height: 21px;
    background-color:white
}

.wbc-pages a{
    text-decoration:none;
    color: #555555;
}

.wcp-pages a:visited{
    color: #555555;
}

.wbc-pages a:hover {
    color: #771100;
}

.ul-menu-a::after{
    content:" \25BE";
    color:#555555;
}

.wbc-pages ul a {
    white-space:nowrap;
}

/*--- DROPDOWN ---*/
.wbc-pages ul li ul{
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
    padding-left:0px;
    padding-top:10px;
    background-color:white;
}

.wbc-pages ul li:hover ul{
    left:0;
}

And here are the results

I left a red border around the main section to help me when placing it on my page. After I got it where I wanted it I removed the border. I could go over in agonizing detail how it works, but I am not going to on this one. To me it seems simple and short enough to copy, tweak and poke at.

One small detail though is it draws the pull down -9999 pixels off screen then moves I back when you hover over it.

References

[1] Virtually Ghetto Blog of William Lan

http://www.virtuallyghetto.com/

Visited 8/2014

[2] Creating a pure CSS dropdown menu, Harry

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Visited 8/2014

[3] pull down demo page from csswizardry

http://csswizardry.com/demos/css-dropdown/

Visited 8/2014

Saturday, August 16, 2014

Pull down menu with pure CSS

My Solution

Now the CSS