CNT Posted January 19, 2011 Share Posted January 19, 2011 http://www.w3schools.com/css/css_navbar.aspI have a horizontal navigation bar:Home...Woodshop...History...ContactI like to have dropdown menu for Woodshop and History. Also, keep the submenu horizontal as well (right below the first row). I want to use pure HTML/CSS without any Java/Javascript. I need guide (website links) on suggestive codes to do this. I did saw a few website but I lost it (no IE history). Now I tried again with google and W3S, I couldn't bring it up again. I am guessing I would have to use hidden/visable element properties?Also, while on this topic, I like to permanently place the horizontal navigation bar on the top row (only needs ~4px top row), and the text in the body scroll while the top menu remains visible. Yes, I want to avoid frame and/or table.While this may not be the best web design, but I want to learn and accomplish this much. This is for my 1st fun/practice website.Thank you.Chuck Link to comment Share on other sites More sharing options...
ShadowMage Posted January 19, 2011 Share Posted January 19, 2011 I like to have dropdown menu for Woodshop and History. Also, keep the submenu horizontal as well (right below the first row). I want to use pure HTML/CSS without any Java/Javascript. I need guide (website links) on suggestive codes to do this. I did saw a few website but I lost it (no IE history). Now I tried again with google and W3S, I couldn't bring it up again. I am guessing I would have to use hidden/visable element properties?You'll need to use the hover psuedo-class and modify display/visibility of certain elements. Typically you'll use nested ul's.There's a great example on css-play.Also, while on this topic, I like to permanently place the horizontal navigation bar on the top row (only needs ~4px top row), and the text in the body scroll while the top menu remains visible. Yes, I want to avoid frame and/or table.position: fixed;Put that on your navbar and it will stay where you tell it to. (ie, top: 0px; left: 0px will keep it at the top left corner)You'll have to add some padding-top to the body though to accommodate for the space no longer occupied by the nav bar. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2011 Share Posted January 19, 2011 All depends if you wish it to work with old IE6 version, IE6 hover psuedo-class only works for anchor element, for it to work for li tag hover to show submenu ul tag, javascript is used to change classes. With IE7 and above, you should not have a problem. Link to comment Share on other sites More sharing options...
CNT Posted January 19, 2011 Author Share Posted January 19, 2011 You'll need to use the hover psuedo-class and modify display/visibility of certain elements. Typically you'll use nested ul's.There's a great example on css-play.The link you provided was good example, yet no tutorial? There's a big "download" ad, is that button spam or would it download the codes for me?I tired ul, but I am not getting it to work...<ul><li><a href="index.htm">Home</a></li><li><a href="#">Woodshop</a></li><li><a href="#">History</a><ul> <li><a href="History1.htm">The beginning...</a></li> <li><a href="History2.htm">The present...</a></li></ul><li><a href="#">Contact Me</a></li></ul> Chuck Link to comment Share on other sites More sharing options...
thescientist Posted January 19, 2011 Share Posted January 19, 2011 you can view the source of that page to find the relevant code you need, no need to download anything. No tutorial on how to make it there, although you could probably Google for that specifically. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 19, 2011 Share Posted January 19, 2011 No tutorial on how to make it there, although you could probably Google for that specifically.Yep! A quick Google search turned up this tutorial. It seems to cover the basics pretty well. Link to comment Share on other sites More sharing options...
CNT Posted January 19, 2011 Author Share Posted January 19, 2011 Yep! A quick Google search turned up this tutorial. It seems to cover the basics pretty well.This has JavaScript... Link to comment Share on other sites More sharing options...
thescientist Posted January 19, 2011 Share Posted January 19, 2011 This has JavaScript...how do you figure? (unless you need the IE6 support, which you can probably get away with)edit:This CSS-only dropdown menu should work in all modern browsers. It has been tested and found working in Firefox 2, IE 7, Safari 3, and Opera 8.5. With the included JavaScript, the dropdowns also work in IE 6 (the all-important non-modern browser). Link to comment Share on other sites More sharing options...
ShadowMage Posted January 19, 2011 Share Posted January 19, 2011 This has JavaScript...The only javascript that is used in that tutorial is used to fix the hover psuedo-class bug in IE6 like dsonesuk mentioned above. If you don't care about supporting IE6 then you don't need the javascript. Link to comment Share on other sites More sharing options...
CNT Posted January 20, 2011 Author Share Posted January 20, 2011 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Who cares (for now)</title> <link rel="Shortcut Icon" href="favicon.ico" /> <link rel="stylesheet" href="Stylesheet.css" type="text/css" /></head><body><div><ul id="navbar"><li><a href="index.htm">Home</a></li><li><a href="#">Something</a></li><li><a href="#">Woodshop</a></li><li><a href="#">History</a><ul> <li><a href="History1.htm">The beginning...</a></li> <li><a href="History2.htm">The present...</a></li></ul><li><a href="#">Contact Me</a></li></ul></div></body></html> CSS: body{ font-size: 2em;}#navbar{ margin: 0; border: 0; padding: 0;}#navbar li { list-style-type: none; float: left;}#navbar li a{ padding: 0px 20px; text-decoration: none; background: black no-repeat right top;}#navbar li ul{ display: none; width: auto;}#navbar li:hover ul{ display: block; position: absolute; margin: 0; border: 0; padding: 0;}#navbar li:hover li a{ background: black; color: white; }#navbar li ul a:hover{ background-color: yellow; color: black;} Well... the dropdown submenu works good (black background and white fonts) with hover (yellow background and black fonts), but the main menu has blue fonts and no hover working (I want hover to change the backgound to yellow). Can someone look at the code and see enough or I should put it up and running on a webhost? When I tried move (or remove) some of section(s), it changes completely (like the two last hover sectrions).Yes, it's 12:45am...Chuck Link to comment Share on other sites More sharing options...
dsonesuk Posted January 20, 2011 Share Posted January 20, 2011 you have to target specific li relating to there main menu or submenu position.#navbar li a:hover { background-color: yellow; color: blue;}on its own will target ALL li a tags, but adding#navbar li li a:hover { background-color: yellow; color: black;}will force ALL li a tags BEYOND the first to now have black text, so depending on which submenu you wish to target you add extra li#navbar li li li a:hover /*2nd SUBmenu*/#navbar li li li li a:hover /*3rd SUBmenu and so on...*/so.. with a little adjustment body{ font-size: 2em;}#navbar{ margin: 0; border: 0; padding: 0;}#navbar li{ list-style-type: none; float: left;}#navbar li ul{ display: none; width: auto;}#navbar li:hover ul{ display: block; position: absolute; margin: 0; border: 0; padding: 0;}#navbar li a /*will target all li anchors - mainmenu level this can be used as setting default styling for all menus*/{ padding: 0px 20px; text-decoration: none; background: black; color: blue;}#navbar li li a /*will target all li a tags beyond mainmenu li anchors - currently all submenus */{ color: #fff;}#navbar li a:hover /*will target all li anchors - mainmenu level ON HOVER*/{background-color: yellow;}#navbar li li a:hover /*will target all li a tags beyond mainmenu li anchors - currently all submenus ON HOVER*/{ color: black;} Link to comment Share on other sites More sharing options...
CNT Posted January 20, 2011 Author Share Posted January 20, 2011 http://members.toast.net/cnt/index.htmI did little more changes and now leading off track... Please take a look at this link above...1) Notice the yellow "cuttab". I want it to remain yellow. The question is I want to make the background black and white font.2) Notice the submenu, there's no yellow "cuttab", that's the way I want it. The yellow "cuttab" only appears in the main menu, then regular block boxes for submenu.3) Now concerning hover... while I want all background black with white fonts, I want the hover to change to background yellow and black fonts. The submenu is acting the correct way.Three things I am confused...(1) I thought CSS does not require where the order of things listed (example: a selector and a declaration, H1 can be put anywhere in the CSS), but when I move a section (selector and declarations), it causes "way off" effects?(2) Where does W3S have explainations on id/class selectors? I can not find where the "#" or "." mean for CSS. I need to learn the id/class selectors and the placeholders (such as li ul a:hover etc).(3) There is no such as "font-color"? Is this what "color" is for? Is there a "shorthand property" for "color" (like in the order of "shorthand property" for "background" is "background-color, background-image, background-repeat, etc")I think I will need to change a little with the submenu later, but for now I really need to understand the id/class selectors. Below is the latest code in the CSS (that is now shown in the link above) :body{ font-size: 2em;}#navbar{ margin: 0; border: 0; padding: 0;}#navbar li { list-style-type: none; float: left;}#navbar li a{ padding: 0px 20px; text-decoration: none; background: black url("images/cuttab.png") no-repeat right top; color: white;}#navbar li ul{ display: none; width: auto;}#navbar li:hover ul{ display: block; position: absolute; margin: 0; border: 0; padding: 0;}#navbar li:hover li a{ background: black; color: white; }#navbar li a:hover{ background-color: yellow; color: black;}#navbar li li a:hover{ background-color: yellow; color: black;} I also noticed the yellow in the "cuttab" is not match with yellow in the hover. Is there a way to fix this, using web color vs saved Paint color? Link to comment Share on other sites More sharing options...
thescientist Posted January 20, 2011 Share Posted January 20, 2011 1) It should not matter where in the CSS the style is defined, but it's position in the HTML can have varying effects depending on the styles and how the selector is being constructed2) right on the left hand side of the CSS tutorials mane; id and classeshttp://www.w3schools.com/css/css_id_class.asp3) I don't think you can get any more shorthanded for font-color than color Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.