Drop down menus without Java

| 4 TrackBacks

Since before I put this site up, I wanted to have a menu along the top for navigation and some quick links, and try to avoid the long list of stuff down the right side of the page. After reviewing a number of sites and doing many searches, I've finally come up with something I like (see menu above).

The primary thing I wanted was a pretty straight HTML solution, no Java. Why? Personal preference, mainly, and I don't feel like learning Java. So, with that in mind, I set out in search of sites that had menus somewhat like I wanted.

After a few days of hitting various pages and doing various web searches, I stumbled across a page at www.theimposter.org that was just about perfect for what I needed. Nice, straightforward code, easy to apply CSS styling to, and of course, no Java.

The examples on that page were fairly clear, but were missing the style sheet additions, so instead of looking at the examples I just looked at the source html for that web page. ;) After copying that to a local file, along with the style sheet used on that page, I was quickly able to tweak up my own version.

By now some of you are probably asking, 'but did you hard code all your categories in there?' Not at all, for that trick, I'll refer you to www.antipixel.com for a perfect way to handle the categories. The antipixel.com page was found thanks to an entry at www.thegirliematters.com, an excellent site full of all manner of web and Movabletype tips.

So, now for the guts. In Movabletype I created a new Index Template called 'Test Template', and had the contents of this be my current 'Main Index' template. To this I added my menu code, and tweaked and rebuilt until I had it where I wanted it. For my site, I wanted the menu to be just below the banner, stretching all the way across the page, so this needed to be before the Content block. I then needed to match the colors to what I was already using on the site so it wouldn't clash. After some work, I finally had it where I wanted it. Now came the task of getting this code into all my pages.

For that, I use the same trick I used to get the right hand side column on all my pages, I created a new Template Module in Movabletype, and I called this one Menu Template. Into this I pasted my new menu code, and then went into all my Index and Archive templates, and just before the content block in each pasted in this:



<MTInclude module="Menu Template"$>

Presto! Movabletype does all the work for me adding that code in, and if I change the menu later (or my right column), it only needs to be done in one place.

By now I'm sure some of you have probably skipped ahead and viewed the source of this page to see what I was doing, but if you haven't, here's the full details:

In your Style Sheet, you'll need additional code for the menus. The colors listed are what I used, change these to match your color scheme:


#menubox{
background-color: #036;
margin: 1px;
height: 23px;
z-index: 9;
}
#menucont {
color: #069;
background-color : transparent;
position: absolute;
z-index: 2;
}
.menublock, .display {
float:left;
width:100px;
background-color: #036;
}
.subs{
background-color: #036;
}
.subs a{
display: block;
}
.menublock .subs{
display: none;
}
#menucont a.tl, #menucont a.tl:hover, #menucont a.tl:active, #menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active {
font-family: "lucida grande", "Lucida Sans Unicode", verdana, sans-serif;
font-size: 10px;line-height: 17px;
display: block;
text-decoration: none;
color: #fff;
background-color: #069;
margin: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
order: none;
text-align: center;
font-weight: normal;
}
#menucont a.tl:hover, #menucont a.tl:active , #menucont a.sl:hover, #menucont a.sl:active{
background-color: #036;
text-align: center;
}
#menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active{
text-align: left;
}


And below is the actual menu itself. The first two menus only have one item, so the menu name is actually the link. The Categories menu has multiple items, so the link on that one is null, so clicking it doesn't do anything, but it could if you wanted.


<div id="menubox">
<!-- BEGIN MENU -->
<div id="menucont">
<div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="http://www.wrightthisway.com/AboutThisSite.html">About This Site</a>
<div class="subs">
</div>
</div>
<div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="http://www.wrightthisway.com/Downloads.html">Downloads</a>
<div class="subs">
</div>
</div>
<div class="menublock" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="">Categories</a>
<div class="subs">
<MTCategories>
<a class="sl" href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel></a>
</MTCategories>
</div>
</div>
</div>
<!-- CLOSE menucont -->
</div>
<!-- CLOSE box and the menu -->



One important point to note is the z-index: 9 in the style sheet for the menubox, that moves that layer more towards the front, if you're using layers, just pick a sufficiently high number to get it on top, that way when it drops down, it will still be visible.

For future reference, I've created an example page showing what this menu looks like, should the site menus change in the future.




Update 4/30/04 - Corrected problem with code pasted above, original didn't include proper MT tags, but instead was actual output of my code. The code given is now correct source.

Update 5/1/04 - An example menu has been put in to show what this menu looks like, as it is likely they will change in the future.

Update 5/10/04 - This menu is now officially out of date, see me new menu here.

4 TrackBacks

TrackBack URL: http://www.wrightthisway.com/cgi-bin/mt/mt-tb.cgi/20

It seems that I made a small error in writing my article on Drop down menus a few days ago... The code that I pasted into the article was actually the OUTPUT of what I was creating, not the code... Read More

adding automatic smilies doing your entire site with MT & &. . . users online drop down menus without Java... Read More

Clearing up myIE2 again! from Rizwan Kassim's Public Log on May 17, 2004 6:45 PM

DVD+-R(W) Help - Video Encoding, Conversion, etc. http://www.videohelp.com/ http://www.cdfreaks.com/ http://www.afterdawn.com/ http://www.doom9.org/ Video Encoding for Palm MT Tags in Pull-Down Menus Drop down menus without Java Optimizing your Movable... Read More

On the old blog, pre-MT 3.x, I used Drop-down menus for the archives (both Category and Monthly). In my continuing quest to rebuild back to where I was, I was reinstituting those drop-down menus. They build just fine with only... Read More

November 2010

Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        

About this Entry

This page contains a single entry by Jim published on April 22, 2004 12:21 AM.

New menus was the previous entry in this blog.

theimposter.org, MIA is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 5.031