Hi,
On this link:
http://www.young-america.com/Rebate-Fulfillment-Solutions.aspx
Can we make the navigation just like theirs but as for a PHP template, totally in css? No javascript.
It is currently done in css but every page has its own menu bar in html. In template , there is t be only one html file which will be called on multiple pages. so the navigation menu would have to auto=adjust to the page it is called upon.
Can it be done with pure css, without javascript?
If you’re going to make them ALL the same width, then you are probably fine and it’s easy to change. If you give each one it’s own width so it doesn’t look like ass, someone wants to add or change a menu item they have to go diving to give it the new appropriate width… that’s a pain in the ass when:
Sticking with 100% dynamic by not stating a fixed width means you never even have to bother in the first place.
Which is why generally I won’t use BOLD on a hover state unless it’s a VERTICAL menu. It’s just not worth it in most cases and there’s plenty of other things you can do on hover.
To me that’s the key to good design - do NOT get your heart set on a visual effect if it’s going to be a pain to implement, more code than it’s worth to implement, or not REALLY adding to the user experience.
Just part of why the whole drawing a pretty picture in photoshop first approach seems completely back-assward to me. It’s putting the cart before the horse and often saddles you with crap that results in 200K+ of markup and CSS for 5k of plaintext. That’s not good web design no matter how pretty it is in photoshop.
is it really a nightmare, not really , imagine doing a multiple find and replace on tags , “the bad old days” to change the widths on each menu and then it all going wrong, thats a nightmare, changing a width on a style sheet isnt really is it. Mind you you have a dynamic php site , so maybe I’m not realising all the implications of not having automated widths in this situation. Correct me if I’m wrong Death.
Bold changes the dynamic width, and there’s no predictable way to adjust for that on each item across all the different fonts or font renderers the page could end up on. The only REAL solution is either to ‘fake’ bold using color (which I think is what you settled on) or to fix the width of each anchor and do text-align:center on them - which usually looks like ass if they are all different widths, or requires changing the width of each one to fit - a maintenance nightmare when someone in the future tries to update the menu.
Look
http://www.visibilityinherit.com/code/current-page-example1.php
Note how in the source, the anchor (any element can have it really, hte <li> for example, as long as you update the CSS) has the ID of “current”. Once the ID is set in the HTML then as long as you have CSS for it, it will style it (thus you can style it as if it’s the current page (with whatever styles you want)) 
If you want dynamic styling depending on what page you are on, that’s just not feasible to do and I’d recommend just getting an ID in there
ok I resolved the above issue of bottom content jumping down.
but I have another one. I think it is a comon one.
The site link now is:
http://www.articlecon.com/digiben/next-2.html#
The menu links are coded to change color on :hover. On :active they are supposed to go bold as well. but while going bold, they make the whole menu links jump left or right.
How can this be avoided? I tried changing the margins and paddings on a:active but it did not work. Anybody has a better solution?
Just so you know, Java isn’t the same as Javascript, one is a programming language developed by Sun Microsystems, you can create games, software applications, and much more (provided you have Java installed, but that’s a different topic). It’s a very nicep rograming language because it’s cross platform compatible (there are no differences to note between platforms)
Javascript is a scripting language used in web browsers to produce effects and behaviors.
PHP (the stuff for current page) is highly basic and if you even know the slightest bit about PHP you could write a current page script (it’s really not that hard ;))
Just to clarify
just change the colour on each page so the current page has a diffent background position for the li or ahref or text colour ,whatevers required. Unless of course theres 100’s of dynamically generated pages , in which case , dunno. Dont bother with the javascript or php if you can help it. Its a really simple nav. It may take a bit more time and be monotonus but its a good clean way, and the search engines will like it more. There will be a some sophisticated way, but theres also the headache of finding the right one, implementing each option correctly and testing them and hoping the author is reliable and the advise you being given is correct. Just use simple css, html or xhtml and change each page, it works , its w3c ok, and its got to be the best option for someone who’s not familiar with php and all the bugs. CORRECT ME IF I’M WRONG PEOPLE, you never know , one day I may be. HAHA !
I knew I coulnt compete with deathshadow. He’s a goodun, try and answer my ones deathshadow, you’ll easily do them, text aligning in ahref’s is really doing my head in.
Sorry I don’t understand. What do you mean by “attach that triangle cutout to the bottom of .current in a padded space”.
I want the menu to be automatically highlight according to the current page. Which includes color change, bolder font and an arrow at the bottom of the link. These changes should take place according to the link selected in the navigation. But there are no separate html pages for each link. Html will have to stay same and only the middle content of it will change for each link. So the menu has to change to highlight the current link in use.
Which is why each page would put the ‘current’ class on a different LI. Rather than throwing javascript at it, you either make the menu on each page unique, or build it with server-side scripting like PHP or ASP… page you linked to is a .aspx - there’s no reason for it to even NEED javascript as you should be doing that in the ASP.
Though the page you linked to also has non-semantic markup, tables for nothing, etc, etc… from the <body> tag to the end of the second menu line it’s what, 2.3k? With semantic markup there’s no reason for that to be more than half that. H1, two UL, done. NONE of the DIV apart from #container should even be in there, NONE of the tables are doing anything that needs a table to be done, even the strong tag and extra DIV’s shouldn’t be there, much less the use of the deprecated CENTER tag (which has NO PLACE in modern markup).
Also that ASP form crap that doesn’t do anything but waste bandwidth is a great argument for switching to PHP. 
– also funny it’s designed to exactly 1024 so it’s NOT 1024 friendly.
To make each page unique you have to make the markup for each page unique - it’s just a matter of minimizing how much content you have to change.
The way I prefer to handle that would just have a class on it thus:
http://www.cutcodedown.com/for_others/mistaya123/method1.html
Another approach some people use (I dislike it because of the amount of CSS involved) puts a class on every link and the parent wrapper (either your width wrapping div or body) and uses inheritance to set it up. This might be easier for you to code the server side logic for since all you need to do is swap the class on BODY.
http://www.cutcodedown.com/for_others/mistaya123/method2.html
On that one you just change the class on BODY to the current page, and the CSS will handle the rest.
In either case though you still have to swap out some markup server-side, but that’s what server-side scripting is FOR. The trick is to minimize how much has to be changed server-side for each page.
@Deathshadows,
Your code is really good. I’ll try to cut my code down as per your page.
However, there is one problem in the current page (besides the ones you have mentioned :)).
http://www.articlecon.com/digiben/nav_css.html#
In firefox, when we click on the menu, the rest of the content below the menu jumps down a few pixels. It does not happen in ie though. Can you tell why that is? Don’t worry about the javascript. I might remove it later.
Thank you for all the help.
There is NOTHING on that page which should warrant the use of javascript - at least in terms of the menu.
Just slap ‘class=“current”’ on the current page’s menu item and attach that triangle cutout to the bottom of .current in a padded space. You wouldn’t even need to be nesting the two menus since there are no hover states! It’s all just static content.
That is why i used javascript. do you have any other suggestions?
If your main nav’s <li>'s (assuming a <ul> <li> structure here) then all you would need to do is make sure you do not unfloat the <li>‘s for the sub-nav, and then just make sure the sub-nav <ul>s’ width is wide enough to fit multiple items on the same line, aka if each subnav <li> is 100px wide, then make sure the subnav <ul> is at least 200px (it will fit 2 items then, etc etc)
If my main nav is horizntal, how do I make the sub-nav horizontal as well?
Display:inline on the sub-nav’s ul?
Please take a look at the page below:
http://www.articlecon.com/digiben/nav_css.html
the javascript is not working. There is a message of syntax error on line12:
[ ddtabmenu.definemenu(“nav”, auto) ]
I don’t know much about javascript. Please help.
Thanx
I wouldn’t go with option 3 on there, I’d go with either option 1 or 2 (depending on which you would find easiest
you mean I just have to include the little PHP code above the navigation menu?
<?php $pageName = “Home”; ?>
The “Home” will automatically change to whatever the current page is?