PDA

View Full Version : need ideas for a menu

KevinG
10-09-2002, 08:29 PM
my creative juices aren't following at the moment so i'm hoping someone here will help inspire me.

i'm working on this site - http://www.designerfinance.com/ - its only one page at the moment as i need to plan my sub nav design for each category across the top i.e. MORTGAGES when clicked would take the user to a page where a menu would be displayed down the left - problem is i can't decide how to present the menu? I would like to use css and text links

i quite like this one http://www.consignia-online.com but its a little complex for me. what do you guys think? can you recommend anything?
ronaldb66
10-10-2002, 09:49 AM
I like that consignia menu too, and it's not that complex once you break it down: they use mouseover and mouseout events to change the styles assigned to table cells, like text and background color. Basically a little javascript and styles, in a nutshell. You could revert to using image rollovers if you're uncomfortable with the methods used there.
You could use the dark red from the captions on the main page for the link text color, and the same dotted underlining used there under each link to create a degree of unity between the main and subsequent pages; just an idea.

I would like to make a few comments on your site too, while i'm at it:

First of all, i really like the layout and look of your design; clean and professional, yet the dark red in the header adds something... well, cozy. Really nice!
Definitely move your horizontal menu bar below the header; it's hard to find the way it is now, i for one missed it the first couple of page views;
It would be nice to make the main choice captions (like "Why designer mortgages") clickable, too; i immediately move my cursor over them and was disappointed not to find a hand!

I'm really curious about how you crack your menu design!
KevinG
10-10-2002, 10:00 AM
i put the h menu up there because i needed to include a drop down menu to all the other sites and when i slipped everything below the head it didn't look right. I think 800x600 people may prefer it up there.

i'm probably going to 'try' and make something like the consignia menu. it is very good but we'll see.

yes i would like to make those red titles links but in my style sheet i set the top h nav links to white and of course that whites out my red titles - hence the lame arrows. i wanted all my link colours to stay the same when people re visit my site. Is there anyway you can define more than one link colour in a style sheet?

btw, thank you for your feedback. my design criteria is to make the design clean and user friendly and preferably search engine friendly.
ronaldb66
10-10-2002, 12:07 PM
Sure you can; just as you assign a style to the hover pseudo-class, like:
a:hover {style here},
you can add a real class, for instance:
a.white:hover
or
a.red:hover
Use this class like normal, f.i.
<a class="white" href=...>
for your top nav bar, and
<a class="red" href=...>
for those red captions.

Btw: why have a drop down menu as well as a vertical menu on the left?!! I mean, better too much navigation than not enough, but why overdo it?
tommysphone
10-10-2002, 01:55 PM
It looks fine to me. Clear, and easy to use :)
KevinG
10-10-2002, 10:10 PM
the drop down menu is links to other sites. the h menu is links for the current site. i'm back working on it in the morning. i'm going to have a crack at creating the sub menus for each section and installing a quick quote mortgage module on the site.

its nice to get such valuable feedback, especially from fellow webmasters :thumbsup:
dauvm
10-10-2002, 11:38 PM
Hey KevinG... just a few things I noticed.

Some things are a little wierd, but it looks like it might be do to different resolutions? I'm running at 1024x768 and the gradient b/g you have doesn't quite line up between the images and the normal background. The resolution is a little poor on this image but you can at least see what I mean, and it's a lot more noticable than it is in this image. Another thing the image shows is how your dropdown menu displays in Mozilla 1.1

http://www.bigevilempire.com/images/posts/error.jpg

Nice site, I agree with other peoples' comments, very warm yet professional... you might think about changing SOMETHING about that grey bar... there's something I don't quite like about it, but not sure what. Just a thought!

Also, I don't know if you care about the old browsers, but your page displays almost perfectly in NN4x except for the grey bar, it's got a space between it.

I also like the www.consignia-online.com menu, and if you use CSS it would be really simple.
KevinG
10-11-2002, 09:43 AM
Yes i noticed that gradient image problem too. I was going to have another crack at fixing that just before the site goes live.

The drop down menu problem has got me concerned, not sure why its doing that. Any ideas on a fix anyone?

The grey bar i think i might change today.
Mhtml
10-12-2002, 03:25 AM
I like it, saved it to my laaarrrgggee folder of inspirational websites, when I need inspiration I just browse my folder in web view and look at the previews I always find examples of what I need.

Great set up I think, for the type of site that is.:)
Thatguy2001au
10-12-2002, 04:00 AM
Hey

Here is a css u can use for your links, all you have to do is edit the colours pretty much to suite your needs. Of course u place the following code in the head section of your page.

<style>
A.menulink {
font-weight: bold;
display: block;
width: 138px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;

}

A.menulink:hover {
font-weight: bold;
border: solid 1px #000099;
background-color:#990000;
color: #FFFFFF;
text-transform: uppercase;
}

</style>

Then all you do is place the following inside your <a href> tag:

class="menulink"

eg: <a href="http://www.whatever.com" class="menulink">Link Name Here</a>

I hope this helps!
dlconnor
10-12-2002, 02:12 PM
I agree too - nice look & feel.
Don't know if this will give you any ideas, but I use it a lot. Just C&P into an html page to see what it looks like.

<%@ LANGUAGE = VBScript %>

<html><head><title>Menu Bar</title>
<!-- ******************************************************************* -->
<% if session("browser") = "MSIE" then %>
<style>
.btnMenu {
width: 95; HEIGHT: 20; TEXT-DECORATION: none; BACKGROUND-COLOR: #6B0000;
border-LEFT: #f8efd3 4px outset; border-TOP: #f8efd3 4px outset;
border-RIGHT: #c5b3ab 6px outset; border-BOTTOM: #c5b3ab 6px outset;
CURSOR: hand; FONT-FAMILY: arial, helvetica, verdana, san-serif;
FONT-SIZE: 9pt; FONT-WEIGHT: bold; COLOR: #c5b3ab;}
</style>
<% else %>
<style>
.btnMenu {
text-decoration: none; background-color: #6B0000;
border: 3px outset #c5b3ab; font-size: 9pt; font-weight: bold; color: #c5b3ab;
cursor: hand; font-family: arial, helvetica, verdana, san-serif; }
</style>
<% end if %>
<style>
A:link { color : #e6e6e6; font-weight : bold }
A:visited { color : #e6e6e6; font-weight : bold }
A:active { color : #e6e6ee6; font-weight : bold }
A:hover { background-color : #e6e6e6; color : #0000a0; font-weight : bold }
</style>
<!-- ******************************************************************* -->
</head>

<body topmargin=0 background="images/gradient.jpg">

<TABLE width="100%">
<TR>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="catalog.asp" target="main">
&nbsp;&nbsp;Catalog&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="showbids.asp?SO=NEW" target="main">
&nbsp;&nbsp;Buyers&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="login.asp?RN=0" target="main">
&nbsp;&nbsp;Sellers&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="partners.asp" target="main">
&nbsp;&nbsp;Partners&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="services.asp" target="main">
&nbsp;&nbsp;Services&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="contact.asp" target="main">
&nbsp;&nbsp;Contact Us&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="aboutus.asp" target="main">
&nbsp;&nbsp;About PHC&nbsp;&nbsp;</a></TD>
<TD width="12%" align=center valign=middle>
<a class=btnMenu href="links.asp" target="main">
&nbsp;&nbsp;Links&nbsp;&nbsp;</a></TD>
</TR>
</TABLE>

</body></html>
dauvm
10-13-2002, 04:04 AM
I must say I've never been a really big fan of using VBScript in my webpages... actually I've been a really big fan of NEVER using it. VBScript only works in IE, and a lot of people (including myself) who use IE disable VBScript for security reasons.

It just seems unnecessary to complicate things with something like that when you could use PHP or CGI or something else just as powerful that everyone can agree on.
In this example, you don't even need any of it, it is all covered by the style sheets you have.

Just my 2 cents :)

-Doug
KevinG
10-13-2002, 01:11 PM
I'm not having much luck creating more than one hyperlink colour in my global style sheet. In my style sheet i defined the top nav white text links but i want to make another set of link styles for the bold red text on my home page http://www.designerfinance.com/ so that i don't have to use those arrow images images.

I've attached my global css file just in case anyone is able to set up another set of styles so that i can see how its done and applied. I'm using DW3 (not keen on DW4 and don't like MX).

Once I figured out to add new hyperlink styles i get on and build that darn sub nav menu.

That vb menu is kinda cool!
c q
10-14-2002, 07:18 PM
http://www.designerfinance.com/
says "You are not authorized to view this page" 403 err ???????
Vladdy
10-14-2002, 08:00 PM
Actually, the vertical menu at http://www.consignia-online.com is rather simple to do.

I did one very similar for the site I'm currently working on (http://server.ime.uri.edu/Template.html ). It is generated dynamically and uses DIVs instead of tables - allows for some overlapping effects not possible with tables.

Vladdy.
KevinG
10-14-2002, 10:06 PM
i swung the site over to its permanent home - www.designermortgages.com

I'm having a difficult time trying to define more than link colour in my style sheet. can anyone help? as this is holding up my lame attempt at building a decent css sub nav for the site.

i zipped up my style sheet if anyone needs to take a peek. everyone time i created a new a:hover style and saved it my css editor said the style was unavailable.
ronaldb66
10-15-2002, 12:28 PM
Kevin,

in your style sheet, instead of:
a { text-decoration: none; font-weight: bold; color: #FFFFFF}
a:hover { text-decoration: underline}
a:visited { color: #FFFFFF}
declare something like:
a.white { text-decoration: none; font-weight: bold; color: #FFFFFF}
a.white:hover { text-decoration: underline}
a.white:visited { color: #FFFFFF}
a.red { text-decoration: none; font-weight: bold; color: #990000}
a.red:hover { text-decoration: underline}
a.red:visited { color: #990000}
and instead of coding your links all like:
<a href=...>
code the "white" links like:
<a class="white" href=...>
and the "red" links like:
<a class="red" href=...>
I did a little test and this should work.
KevinG
10-16-2002, 12:34 PM
I followed your advice and made the relevant changes to my css file - but in dreamweaver's css tool its says the "white" and "red" styles are unavailable.

heres my css file - the last two paragraphs are the white and red styles.


.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #CCCCCC; background-repeat: no-repeat}

.headings { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; color: #FFFFFF; text-decoration: none; font-weight: bold}

.formtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-weight: bold; color: #FFFFFF; text-decoration: none}

</style>.formboxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #FFFFFF; background-repeat: no-repeat}

.boxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #FFFFFF; background-repeat: no-repeat}

.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none}

.dropdownmenus { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #CCCCCC; background-repeat: no-repeat; white-space: normal; height: 1mm; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; vertical-align: top; top: 1px; clip: rect(1px 1px ); line-height: normal; background-position: 0px 0px; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px}

.hometext { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #FFFFFF; font-weight: normal; text-decoration: blink}

.smallwhitebold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 6.5pt; font-style: normal; font-weight: bold; color: #FFFFFF}

.redlarge { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000}

.smallsilver { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #666666}

.boldtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}

.smallblack { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000}

a.white:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: underline}
a.white:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF}
a.white { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}

a.red { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000}
a.red:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: underline}
a.red:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000}



Thought it would be best to shovel the lot up. I can't see what i am doing wrong???
redhead
10-16-2002, 04:29 PM
heres a little bit of code you might consider if you want to change the cell colours... its extremely simple when you break it down:


<style>
td.menuoff {
background-color: #FFFFFF;
}
td.menuon {
background-color: #999999;
}
</style>

<table>
<tr>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
text here...
</td>
</tr>
</table>

like the design! just one note... for us poeple on our 800*600 resolution, you page is a tiny bit too wide.

hope this helps you:thumbsup:
KevinG
10-16-2002, 07:44 PM
thanks redhead i'm going to use that for my sub nav menu.

everything has ground to a halt because i can't define more than one link colour in my global css file. i've tried everything!


a.white:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: underline}
a.white:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF}
a.white { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}

a.red { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000}
a.red:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: underline}
a.red:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000}


i was sure the above styles would work but noooooooo
:mad:
ronaldb66
10-17-2002, 08:37 AM
Kevin,

</style>.formboxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #FFFFFF; background-repeat: no-repeat}
Is the style end tag in bold a typo? If not, it would mean your style sheet ends there, which would explain the non-availability of every style declared after it.
Otherwise, this may be a Dreamweaver limitation, although i have a hard time believing that; then again, i don't know Dreamweaver at all. Maybe some experienced DW user can help you out on this; as said, i tried the styles hand coded in a little test page, and they worked like a charm.