HTML COURSE - CSS Menu

XML

Hypertext Markup Language

CSS

CSS Menu
<html> <head> <title>DROP DOWN MENU EXAMPLE</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript"> // loads global functions loadGlobalFunctions=function(){ // switches on-off menu display switchMenu=function(){ menu=document.getElementById('menu'+this.id); if(menu.className=='hidden'){ menu.className='menu'; } else{ menu.className='hidden'; } } // gets all <a> elements as=document.getElementsByTagName('a'); navAs=[]; // makes array from <a> elements with class name 'navbar' for(i=0;i<as.length;i++){ if(/\bnavbar\b/.test(as[i].className)){ navAs[navAs.length]=as[i]; // assigns onclick event handler to navbar <a> elements navAs[i].onclick=switchMenu; } } } // executes code once page is loaded window.onload=loadGlobalFunctions; </script> <style type="text/css"> #button0 { position: absolute; width: 15%; top: 10px; left: 0px; } #button1 { position: absolute; width: 15%; top: 10px; left: 15%; } #button2 { position: absolute; width: 15%; top: 10px; left: 30%; } #menu0 { position: absolute; width: 14%; top: 30px; left: 0px; } #menu1 { position: absolute; width: 14%; top: 30px; left: 15%; } #menu2 { position: absolute; width: 14%; top: 30px; left: 30%; } .hidden { display: none; } a.navbar:link,a.navbar:visited { display: block; background: #0f0; font: bold 11px "Verdana", Arial, Helvetica, sans-serif; color: #000; padding: 2px; text-align: center; text-decoration: none; border: 1px solid #000; } a.navbar:hover { text-decoration: underline; } .menu { display: block; background: #ffc; font: normal 11px "Verdana", Arial, Helvetica, sans-serif; color: #000; padding: 4px; border: 1px solid #000; } </style> </head> <body> <div id="button0"><a href="#" class="navbar" id="0">Company</a></div> <div id="button1"><a href="#" class="navbar" id="1">Products</a></div> <div id="button2"><a href="#" class="navbar" id="2">Contact</a></div> <div class="hidden" id="menu0"> Profile<br /> Staff </div> <div class="hidden" id="menu1"> Web Compilers<br /> HTML Editors<br /> PHP Editors<br /> Database Software </div> <div class="hidden" id="menu2"> Technical Support<br /> Knowledge Base<br /> Administrative Support </div> </body> </html>

Cascading Style Sheets (CSS) are lists of formatting
instructions that you can use to customize your web page.

Using a linked style sheet, you can declare styles in a separate text file, then link all your web pages to that file. All pages will follow the instructions contained within that text file.

INTRO