Jump to content
Neo

CSS: please make a tut about how to make nav bar with sub items

Recommended Posts

Hi

 

I have recently read through the pages about CSS Navigation Bar and I think a nice addition to these pages would be if it also showed how to make a navigation with sub items, because I personally find the CSS on this subject a little hard to understand.

 

So I hope, the team who are maintaining the site, will find some time to make a chapter on this subject as I think it will help a lot of people who are just starting to learn CSS.

Share this post


Link to post
Share on other sites

look up suckerfish and son of suckerfish css menu, there so many sites on how to do this, we would repeating what's has already out there if you look.

  • Like 1

Share this post


Link to post
Share on other sites

look up suckerfish and son of suckerfish css menu, there so many sites on how to do this, we would repeating what's has already out there if you look.

Thank you for pointing me in that direction, however, the example appears to make use of JavaScript which will only end up frustrating inexperienced users (myself included !)What I'm after; is a navigation bar with a submenu and without all the bells and whistles and eye-candy.I think it would be a nice thing to have on W3Schools, so users don't have to spend their time chasing all about the web trying to find a good and simple example.

Share this post


Link to post
Share on other sites

Geez! the only thing that JavaScript does is to make it work in crappy old versions of IE (6 and 7 i think), being such a crappy browser (then and now) IE needed this feature to work, so its not bells and whistles, it essential for these browsers to work.

 

Please w3schools can we have tutorial

1) on how to properly such the internet

2) not to simply glance through subject we had just searched for.

3) OR if you wouldn't mind doing the search for us, this would be appreciated

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Geez! the only thing that JavaScript does is to make it work in crappy old versions of IE (6 and 7 i think), being such a crappy browser (then and now) IE needed this feature to work, so its not bells and whistles, it essential for these browsers to work. Please w3schools can we have tutorial1) on how to properly such the internet2) not to simply glance through subject we had just searched for.3) OR if you wouldn't mind doing the search for us, this would be appreciated

First of all; I think your comment is an insult to me as well as everybody else who are using W3Schools in their learning process - making a navigation bar is pretty easy to do... once you know how to do it, as everything else in life.I don't see the problem in W3Shools showing a user what can be done once his/her skills in HTML and CSS improves and besides a navigation bar with submenus ties very well together with W3School's HTML section about lists.Please don't reply anymore if your only intent is to flame and patronise.

Share this post


Link to post
Share on other sites

I think by "sub items", you refer to what we call Child List element link. W3Schools has not provided anything in its public website coding references concerning navigation Child List elements. Why? Years before current w3schools site, we bandied about the menu tutorial idea with Sacred Member and Greg Boyles, concluding that the knowledge and practice around Child List elements was not properly supported in the real-world browser market. However, since then HTML5/CSS3 has changed the DOM around navigation. We now have the nav element, fully supported by all modern browsers, which has stolen some development focus from the HTML list (menu, ul, etc.) elements, but not replaced them. Development of navigation in DOM around HTML5, may involve a list element change. However, CSS3 has seen considerable expansion of related selector capabilities... Maybe W3Schools should refocus navigation (List technology particularly) in the CSS3 section of W3Schools.com. Glaringly, navigation examples have been excluded from the public CSS Reference (http://www.w3schools.com/cssref/default.asp). The nav element's rare Opera-only extensions are exampled in the CSS Reference. The HTML Reference for the li element (http://www.w3schools.com/tags/tag_li.asp) contains a simple child list, but no organization of navigation coding there either! Likely the same confusion that began this forum topic effects all of us. Why does navigation involve so many elements, and what is the simple way to code navigation?

 

Well, navigation doesn't have to confuse us. Even though W3Schools omits the raw, fully supported basic public navigation tutorials in both HTML and CSS references, W3Schools can easily provide those tutorials, given the emergence of the new HTML5/CSS3 technology. For example, simply replace p with nav tags containing a string of links and you have a simple navigation structure.nav a { color: crimson } ... <nav> <a href="#">Link 1</a> <a href="#">Link 2</a>... This is navigation. </nav>The list-style navigation is more complex, more secure when properly coded, far more flexible in HTML environments, and is also frequently script-enhanced, and is far more common than the simple nav link-string navigation. So a basic navigation section including simple List and Child List models is also a glaring Reference omission. Where do you think navigation tutorials belong?

 

Perhaps W3Schools has refused to go beyond List (http://www.w3schools.com/html/html_lists.asp) to Child List because (among other reasons) they fear then being asked to tut child-everything. Which could really detract from the W3Schools purpose, learning simplicity. However, navigation is a foundation technology application in CSS3 coding today. So perhaps a section on Navigation might be added to the CSS Reference page (http://www.w3schools.com/cssref/default.asp) in the top left column CSS Reference, under CSS Color Hex, "CSS Navigation". But using what content? W3Schools may use 7 models, beginning with the simple Nav String, above. Then for List elements, 2 basic models, Horizontal and Vertical navigation. Those two models can then parent 3 common variants of Child List Menus: Drop Down, Drop Line, and Fly Out navigation.. All 3 variants can be simply constructed. W3Schools may include a 7th and final demonstration of 'button' link (a wraps li) vs. text link (li wraps a).

<a href="#"> <li> link </li> </a> vs. <li> <a href="#"> link </a> </li>

 

FYI Your horizontal / vertical / drop-down / drop-line / fly-out task is not rocket science (though cascade and inheritance may make navigation code seem that complicated, especially for learners)...

You need to style 4 elements nav, a, ul, and li.

You need at least 5 element strings: 'nav', 'ul', 'ul li', 'ul li a', and 'li li'.

The nav element styling is optional, as most browsers and devices handle unstyled nav just fine in their native display formats. The other 3 elements are normally styled.

4 elements and 5 CSS strings will build seven simple navigation models.

 

Would someone like to code CSS Navigation? Would you like my help?

 

Re son of suckerfish.

There are two SOS sites, and looks like you found the theoretical one, not the basic howto (together, a good historical read). If you really want suckerfish, Patrick Griffiths has an excellent book, The Best Practice Guide to XHTML and CSS (http://www.htmldog.com/articles/suckerfish/dropdowns). Try STU (for SOSOS and more). The best consolidated menu education is supported at STU's site, CSS Play (http://www.cssplay.co.uk/menus). Simply view page source to extract and study code structure: kindly pay for priced items you deploy, and simple content discussed herein is entirely free, though obscurely hidden in hundreds of similar sounding links (good luck and learn lots).

Edited by mark.stewart

Share this post


Link to post
Share on other sites

HiJust an update: I did eventually figure out how to make a navigationbar using information from other sources - eventhough I would have liked to have gathered the information from W3Shools.

Share this post


Link to post
Share on other sites

I realize this post is over a year old, however, I am brand new to learning about CSS and navigation. What I am ultimately looking for is an example of how W3 Schools executed their menu bars. I want to be able to have a drop-down like they have for examples and tutorials where it looks like a box that can have multiple headings under it and the content of the main page shifts down when opened. If anyone knows of someplace where I can find such an example, I would greatly appreciate the learning opportunity.

Share this post


Link to post
Share on other sites

I realize this post is over a year old, however, I am brand new to learning about CSS and navigation. What I am ultimately looking for is an example of how W3 Schools executed their menu bars. I want to be able to have a drop-down like they have for examples and tutorials where it looks like a box that can have multiple headings under it and the content of the main page shifts down when opened. If anyone knows of someplace where I can find such an example, I would greatly appreciate the learning opportunity.

I think you should try looking for the Source Code on the W3Schools page. Hope it helps !!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...