Staredit Network

Staredit Network -> Computers and Technical -> Menus

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-13 at 21:21:03

im makin a website for a Customer, now normally u only do the design, but he asked me to code it too, so how would i make a menu like that od SEN??? the actual code would be nice too if u can...

Report, edit, etc...Posted by O)FaRTy1billion on 2005-11-13 at 21:37:54

Javascript menus?

This is how I do them (SEN's is a bit different, however)

HTML

<style type="text/css">
BODY { background-color:#000; color:#FFF; font-size: 12px; text-align:center; margin:70px 0px 12px 0px }
TABLE { background-color:#000; color:#FFF; font-size: 12px; text-align:center; margin:0px 0px 0px 0px }
a:link, a:visited, a:active { color:lightblue; text-decoration:none; }
a:hover { width:150; color:lightblue; text-decoration:underline; background:#222; }
span { font-size: 18px; }

.hidden { display:none; }
.show { display:; }
</style>
<table width=100%>
<tr>

<td width=50% valign="top" OnMouseOut="cata.style.display='none'" OnMouseOver="cata.style.display=''">
<span>Catagory A</span><br>

<div id="cata" style="display:none">
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a>

</div>
</td>
<td width=50% valign="top" OnMouseOut="catb.style.display='none'" OnMouseOver="catb.style.display=''">
<span>Catagory B</span><br>
<div id="catb" style="display:none">
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a><br>
<a href="http://www.staredit.net">StarEdit Network</a>
</div>
</td>

</tr>
</table>

Works on IE and FF. (Except when I tested in FF about half the time it would ignore the OnMouseOut)

Smaller column widths makes it so its drag over the text, rather then that section of the page.

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-13 at 21:46:34

so how would this b implemted into an html editing program, i hav Microsoft Frontpage... and on dial-up so im not downloading anytime soon, or can i use notepad somehow

Report, edit, etc...Posted by O)FaRTy1billion on 2005-11-13 at 21:51:19

Just put it anywhere (Test I tried I just put that as the page)

CSS usually goes in the <HEAD>, and the <table> has to go into the <BODY>.
(In front page click the HTML tab at the bottom. Hopefully you know enough about HTML to know what a "Tag" is and what "HEAD" and "BODY" tags are

)

Also the example I posted fills the page with the table cells, so each one is 50% of the page (Yes a bad example, but I did it quickly)

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-13 at 22:05:09

still nada, im off now anyway, ill b bak tomoro nite

Report, edit, etc...Posted by brutetal on 2005-11-14 at 20:30:22

It won't work for FireFox for me.

I'm gonna use the code for my klan website, been looking for a menu like this thanks!

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-14 at 20:52:53

i still cant figure out how to get it to work, i paste the table part between the body tags, and im guessin the 1 line near the top goes in the head tags, then i tried saving as html in java, javascript, html and all the others, still nada, maybe in just bad at it

Report, edit, etc...Posted by brutetal on 2005-11-14 at 22:13:20

QUOTE(AFL-InuYasha @ Nov 14 2005, 06:52 PM)

You save it as html and it should work when you move your mouse over.

To my problem, It just started to work for me in FireFox not sure how it did but it did YAY!

Report, edit, etc...Posted by O)FaRTy1billion on 2005-11-16 at 20:24:30

Works for me in FireFox... its just FireFox's slowness makes it slow.

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-16 at 21:17:24

wow, i really suk at doin a site, i cant even get simple drop dwn menu to work, ui chked SEN's source code thingy in front page and damn its confusing, i wouldn't know where to start. can u maybe send me a html file that the drop dwn menu works on ill look at how the code was put in, its probably real simple, heres how i have it

CODE

im sure i did it wrong

Report, edit, etc...Posted by O)FaRTy1billion on 2005-11-16 at 23:18:24

Works for me.

Report, edit, etc...Posted by brutetal on 2005-11-16 at 23:49:14

Works for me too!

Report, edit, etc...Posted by AFL-InuYasha on 2005-11-19 at 17:45:53

well thqts the html code, i open front page, paste that in html tab, press savce as html, try and open, and it shows up as code

Report, edit, etc...Posted by O)FaRTy1billion on 2005-11-19 at 19:53:25

Is it opening in the browser?

Report, edit, etc...Posted by Jordan on 2005-11-19 at 21:57:45

instead of using .html try .htm

Report, edit, etc...Posted by Shadow_da_Sniper on 2005-11-23 at 19:26:27

What's the difference?
Lol, I was just about to post for help on this to make menus, but it looks like somebody already posted one!

K, here's my problem. When I try to put menus, using <divs> (<div id="something"> and then div class="something" and then, </div>)
It doesn't come up.

Am I doing something wrong, or is it just my webhost doesn't like wierd HTML?

WAIT, i'll try your code!!!

Next Page (1)