Anthology of Ideas

I’m running around stark naked in all my white glory. Why am I doing this? Other than the social aspect of being like everyone else, it is a great opportunity for the less-than-knowledgeable people to know what I look like underneath my superficial exterior. As you can see, I’m beautiful even without my clothes.

I’m glad my webmaster, Aaron, has taken care of my and built me into the most beautifulest website I can be. It doesn’t take a lot of CSS and styling to make me look good because I’m beautiful to the bone. YAY ME!!

~ post by Anthology of Ideas not Aaron (please don’t tell Aaron.)

P.S. The first person in this post is not the writer, but the website itself. So no, I’m not sitting here on the computer naked.¹

P.P.S. It is CSS naked day.

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

1. <div style="text-align:center;">
2. <ul id="menu" style="padding:0; margin:0;">
3. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
4. </ul>
5. </div>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

1. ul#menu {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 100%;
6. font-size:1.2em;
7. }
9. ul#menu li {
10. float: left;
11. padding: 0;
12. margin: 0;
13. border-right:solid 1px #fff;
14. }
16. ul#menu ul li {
17. float: none;
18. position: relative;
19. border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
20. border-left: 1px solid #FFF;
21. z-index:1000;
22. }
24. ul#menu li ul {
25. margin: 0;
26. padding: 0;
27. display:none;
28. list-style: none;
29. position: absolute;
30. background: #9CC;
31. }
32. ul#menu ul ul{
33. margin-left: .2em;
34. position: absolute;
35. top: 0; /* if using borders, -1px to align top borders */
36. left: 100%;
37. }
39. ul#menu * a:hover, ul#menu li a:active{
40. background:#7EAED7 !important;
41. color: #FFFFFF;
42. }
44. ul#menu li a:link,
45. ul#menu li a:visited,
46. ul#menu li a:hover,
47. ul#menu li a:active{
48. display: block;
49. padding: .2em .3em;
50. text-decoration: none;
51. background: #5587B3;
52. color: #FFFFFF;
53. }
56. ul#menu ul li a:link,
57. ul#menu ul li a:visited,
58. ul#menu ul li a:hover,
59. ul#menu ul li a:active {
60. width: 8em;
61. }
62. Use the following to copy and paste the code.
    ul#menu { margin: 0; padding: 0; list-style: none; width: 100%; font-size:1.2em; } ul#menu li { float: left; padding: 0; margin: 0; border-right:solid 1px #fff; } ul#menu ul li { float: none; position: relative; border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */ border-left: 1px solid #FFF; z-index:1000; } ul#menu li ul { margin: 0; padding: 0; display:none; list-style: none; position: absolute; background: #9CC; } ul#menu ul ul{ margin-left: .2em; position: absolute; top: 0; /* if using borders, -1px to align top borders */ left: 100%; } ul#menu * a:hover, ul#menu li a:active{ background:#7EAED7 !important; color: #FFFFFF; } ul#menu li a:link, ul#menu li a:visited, ul#menu li a:hover, ul#menu li a:active{ display: block; padding: .2em .3em; text-decoration: none; background: #5587B3; color: #FFFFFF; } ul#menu ul li a:link, ul#menu ul li a:visited, ul#menu ul li a:hover, ul#menu ul li a:active { width: 8em; }

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.