Next up in our series of SitePoint forums quick code challenges we’re going to move away from the esoteric and cute (checkerboards, spinning dice) to something more concrete and practical: drop down menus. You don’t have to go far to spot one — there’s one on the SitePoint homepage.
Here’s a copy of the relevant HTML:
<!DOCTYPE html>
<head>
<style type="text/css">
/* Put your css here */
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://www.sitepoint.com" >Home</a></li>
<li><a href="https://www.sitepoint.com/forums/">Forums</a>
<ul>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
<li><a href="https://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
</ul>
</li>
<li><a style="cursor:default;">Resources</a>
<ul>
<li><a href="https://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
<li><a href="https://www.sitepoint.com/category/podcast/" >Podcast</a></li>
<li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
<li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
<li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
<li><a href="https://www.sitepoint.com/tools/" >Tools</a></li>
<li><a href="https://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
<li><a href="https://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
</ul>
</li>
<li><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
<li><a href="http://products.sitepoint.com/" >Bookstore</a>
<ul>
<li><a href="https://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
<li><a href="http://products.sitepoint.com/" >New Releases</a></li>
<li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
<li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
<li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
<li><a href="https://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
<li><a href="https://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
<li><a href="https://www.sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
</ul>
</li>
<li><a href="http://www.sitepointmarket.com" >Market</a></li>
<li><a href="https://learnable.com/sitepoint" >Courses</a></li>
<li><a href="http://www.sitepoint.com" >Sitepoint Network</a>
<ul>
<li><a href="https://www.sitepoint.com/" >JSPro</a></li>
<li><a href="http://www.sitepoint.com" >BuildMobile</a></li>
<li><a href="http://www.sitepoint.com" >DesignFestival</a></li>
<li><a href="http://www.sitepoint.com" >RubySource</a></li>
<li><a href="http://www.sitepoint.com" >CloudSpring</a></li>
<li><a href="http://www.sitepoint.com" >PHPMaster</a></li>
<li><a href="https://learnable.com/" >Learnable</a></li>
<li><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
SitePoint uses a jQuery plugin called Superfish to insure backward compatibility with older browsers, even IE 6. In this exercise we will work only with the CSS needed to create the effect since modern browsers can achieve it without any JavaScript.
Beginner Challenge
Replicate the SitePoint homepage drop downs in CSS only. You’ll need to make use of the li:hover attribute, position relative and position absolute.
Don’t fret to much about the color, font and spacing, the goal here is to master and understand the effect of a drop down menu.
Advanced Challenge
Use CSS media queries to change the menu into an accordion for phones. Keep in mind that phones register the first touch on an element as a :hover.
Expert Challenge
Using CSS transitions, make the menus fold or fade in, dissolve out, or whatever suits your fancy. You may need to modify the HTML for more elaborate effects.
Have fun!
Sarah HawkFormerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media to become the Community Manager for the SitePoint network. Now Hawk is working with Discourse to build their product and community.
