unique javascript menu help needed

@HaganeNoKokoroOct 17.2004 — #Here's a CSS list-based approach. Works for me in NN7, FF1.0PR, and IE6.

[upl-file uuid=87be508a-6f97-441a-b4a0-ba8e05d9ee22 size=1kB]menu.zip[/upl-file]

@postinoauthorOct 17.2004 — #Wow, thanks for the prompt reply. I've never used CSS before though, but I like what I see. I'm trying to modify the series button to drop down from under the menu button instead of beside the menu button. Can you tell me how to do that?

And I can't find the code to set the width & height & font.

Thanks once again for the prompt reply.

@HaganeNoKokoroOct 17.2004 — #Font: add the red part

ul.base {
 [COLOR=RED]font-size:16pt;
 font-family:YourFontHere;[/COLOR]
 list-style:none;
 display:block;
 margin:0px;
 padding:0px;
 }

Displaying underneath: add the red parts

ul.base li:hover ul.menu, ul.base li.hover ul.menu {
 [COLOR=RED]position:absolute;[/COLOR]
 display:inline;
 }

&lt;ul class="base"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;[COLOR=RED]&lt;br&gt;[/COLOR]
 &lt;ul class="menu"&gt;
 &lt;li class="l1"&gt;&lt;a href="#"&gt;&amp;nbsp;Series A&amp;nbsp;&lt;/a&gt;
 &lt;ul class="sub1"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Prices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Order&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 
 <i>    </i>  &lt;li class="l1"&gt;&lt;a href="#"&gt;&amp;nbsp;Series B&amp;nbsp;&lt;/a&gt;
 <i>    </i>    &lt;ul class="sub1"&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Prices&lt;/a&gt;&lt;/li&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Order&lt;/a&gt;&lt;/li&gt;
 <i>    </i>    &lt;/ul&gt;
 <i>    </i>  &lt;/li&gt;
 
 <i>    </i>  &lt;li class="l1"&gt;&lt;a href="#"&gt;&amp;nbsp;Series C&amp;nbsp;&lt;/a&gt;
 <i>    </i>    &lt;ul class="sub1"&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Prices&lt;/a&gt;&lt;/li&gt;
 <i>    </i>      &lt;li&gt;&lt;a href="#"&gt;Order&lt;/a&gt;&lt;/li&gt;
 <i>    </i>    &lt;/ul&gt;
 <i>    </i>  &lt;/li&gt;
 <i>    </i>&lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;

Menu Width: change the red number

ul.menu li:hover ul.sub1, ul.menu li.l1hover ul.sub1 {
 display:inline;
 position:absolute;
 width:[COLOR=RED]100[/COLOR]px;
 top:19px;
 border:solid #000000 1px;
 }

You could set a height for the menu items as well, but I don't recommend it since it would mess with their normal resizing.

Also, you should note I'm relatively new to doing this sort of thing with CSS; doubtless others who are better will point out big flaws in my approach. I welcome constructive criticism.

unique javascript menu help needed

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

unique javascript menu help needed

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴