Jump to content

mark.stewart

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by mark.stewart

  1. 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).
×
×
  • Create New...