DaniWeb IT Discussion Community

Code Snippets (http://www.daniweb.com/code/)
-   css (http://www.daniweb.com/code/css.html)
-   -   Pure CSS Rollover Navigation (http://www.daniweb.com/code/snippet625.html)

roryt css syntax
Jan 1st, 2007
This piece of css will show you that it is perfectly possibly to create a good looking navigation bar without any images or javascript and just a couple of lines of css.

All you need to do is create a html file that contains a unordered list in it with your navigation links in it as <li>. You will then need to simply attach the css file to your html.

I hope this will help you to realise that it isn't all about huge flash navigation and rollover images.

You can find my example here.
 

  1. /* CSS Document */
  2.  
  3. body	{
  4. 	font-family: Arial, Helvetica, sans-serif;
  5. 	font-size: 12px;
  6. 	color: #999999;
  7. 	margin: 0px;
  8. 	}
  9.  
  10. ul	{
  11. 	float: left;
  12. /*this part will stop it moving when the page scrolls so you may not want to include it*/
  13.  
  14. 	position: fixed;
  15. 	margin-left: 20px;
  16. 	}
  17.  
  18. li	{
  19. 	width: 150px;
  20. 	height: 15px;
  21. 	margin-top: 3px;
  22. 	border-style: solid;
  23. 	border-width: 1px;
  24. 	border-color: #64acd8;
  25. 	font-weight: bold;
  26. 	font-size: 120%;
  27. 	background-color: #ffffff;
  28. 	list-style: none;
  29. 	padding: 3px;
  30. 	}
  31. li:hover	{
  32. 	background-color: #faffd8;
  33. 	border-color: #004f7b;
  34. 	}
  35.  
  36. a:link	{
  37. 	text-decoration: none;
  38. 	color: #999999;
  39. 	}
  40. a:hover	{
  41. 	text-decoration: none;
  42. 	color: #333333;
  43. 	}
  44. a:visited	{
  45. 	text-decoration: none;
  46. 	color: #999999;
  47. 	}
  48.  
  49. a:active	{
  50. 	text-decoration: none;
  51. 	color: #FF0000;
  52. 	}