www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: [RESOLVED] Two navigation bars on one page

  1. #1
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139

    resolved [RESOLVED] Two navigation bars on one page

    I have my sites set up where some pages have two navigation bars: one at the top and one at the bottom. On all of those websites, the top bar is tagged id=navbar and the bottom id=navb. The pages display as desired, except for one. That site only displays correctly in IE. However, if I change the bottom tag to class=navb, it then displays correctly cross-browser. Only the tag is changed, not the associated styles. What could be the problem? I haven't a clue where to look. Is there a possible conflict having two similar ids like navbar and navb?

    Also confusing, if I code the pages inline, it makes no difference. id=navbar and id=navb display as intended. But if I change the inline style to a stylesheet, the id=navb will not display except in IE. Incidentally, the code and css validate.
    Last edited by jwgrafflin; 11-05-2013 at 05:51 PM.

  2. #2
    Join Date
    Nov 2013
    Posts
    41
    I would be helpful if you could post the HTML and CSS for the top & bottom bars or link to your site. I think it might be a css "." instead of a "#" in some cases, but there is no way for me to tell. It is probably something else.

  3. #3
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    Resolved - Ditched the list format and went with <nav>. Works like a charm. Less code and a much smaller css as well.

  4. #4
    Join Date
    Nov 2013
    Posts
    2
    Itís not so simple now a days to buy a excellent written essays, first of all if you are intent. Someone always help make seriuosly posts i'd condition.

  5. #5
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    Up jumps another problem. My menu highlighter script, which works on several different menus, only works on one menu at a time. So, if there are two menus on the page, the code goes wacko and you can't read the page:

    Code:
    <!--
    ////////////////////
    //Menu Highlighter//
    ////////////////////
    /**************************************************************************
     *                                                                        *
     *  JAVASCRIPT MENU HIGHLIGHTER v.1.5 (080929)                            *
     * --------------------------------------------                           *
     * ©2005 Media Division (www.MediaDivision.com)                           *
     *                                                                        *
     * Written by Marius Smarandoiu & Armand Niculescu                        *
     *                                                                        *
     * You are free to use, modify and distribute this file, but please keep  *
     * this header and credits                                                *
     *                                                                        *
     * Usage:                                                                 *
     * - the script will apply the .current class to the <a> and its parent   *
     *   <li> that is contained in the element with id="primarynav" and points*
     *   to the current URL                                                   *
     * - works in IE6, Firefox and Opera                                      *
     **************************************************************************/
    function extractPageName(hrefString)
    {
    	var arr = hrefString.split('/');
    	return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               
    }
    
    function setActiveMenu(arr, crtPage)
    {
        for (var i=0; i < arr.length; i++)
        {
            if(extractPageName(arr[i].href) == crtPage)
            {
                if (arr[i].parentNode.parentNode.parentNode.parentNode.tagName != "DIV",
                arr[i].parentNode.tagName != "DIV")
                {
                    arr[i].className = "current";               
    
                    arr[i].parentNode.parentNode.parentNode.parentNode.className = "current";
                                    arr[i].parentNode= "current";
                }
            }
        }
    }
    
    function setPage()
    {
    	hrefString = document.location.href ? document.location.href : document.location;
    
    	if (document.getElementById("top")!=null)
    		setActiveMenu(document.getElementById("top").getElementsByTagName("a"), extractPageName(hrefString));
    
    	if (document.getElementById("bottom")!=null)
    		setActiveMenu(document.getElementById("bottom").getElementsByTagName("a"), extractPageName(hrefString));
    
    	if (document.getElementById("left")!=null)
    		setActiveMenu(document.getElementById("left").getElementsByTagName("a"), extractPageName(hrefString));
    
    	if (document.getElementById("right")!=null)
    		setActiveMenu(document.getElementById("right").getElementsByTagName("a"), extractPageName(hrefString));
    
    }
    -->

  6. #6
    Join Date
    Jul 2012
    Location
    UK
    Posts
    15
    Would help if you posted us a live link...

  7. #7
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    My live link died. The cat just covered it up. But here's a snippet of the top and bottom menus:
    Code:
    <nav role="navigation" id="top">
    	<a class="first" href="http://www.mysite.com/">Home</a>
    	<a href="http://www.mysite.com/one.php">One</a>
    	<a href="http://www.mysite.com/two.php">Two</a>
    	<a href="http://www.mysite.com/three/">Three</a>
    </nav>
    
    <nav role="navigation" id="bottom">
    	<a class="first" href="http://www.mysite.com/">Home</a>
    	<a href="http://www.mysite.com/one.php">One</a>
    	<a href="http://www.mysite.com/two.php">Two</a>
    	<a href="http://www.mysite.com/three/">Three</a>
    </nav>
    You'll notice the contents of the navigation bars is identical. Only the css is different (the top css has a bottom border while the bottom css has a top and bottom border).

    Both navigation bars appear and work just fine without the ID. When I add the ID to either the top or bottom bar, both bars work just fine with the applicable bar highlighted. But when I add the ID to both bars, everything goes wonky.

    Seems to me it's the <nav> tag in html5 that's causing the problem, but I'm no expert on html5.
    Last edited by jwgrafflin; 11-07-2013 at 10:14 PM. Reason: Because I want to

  8. #8
    Join Date
    Nov 2013
    Posts
    41
    IDs are meant to identify one object. Use a class.
    HTML Code:
    <nav class="classNameHere"></nav>  <!-- Top -->
    <nav class="classNameHere"></nav>  <!-- Bottom -->
    
    <style type="text/css">
    .classNameHere {
      // CSS Rules would apply to both bottom and top
    }
    </style>
    Basically, it uses a "." instead of a "#" in CSS. In HTML, it uses the "class" attribute instead of "id".

    This applies to all HTML versions.

    IF I AM WRONG, (not answering your question) POST YOUR CSS!
    Check for CSS errors. Missed brackets, semicolons, colons, etc.

  9. #9
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    I do know the difference between "." and "#". Refer to the Highlight script posted above. It requires ID. And, as posted above, the code and css pass w3c validation.

  10. #10
    Join Date
    Nov 2013
    Posts
    41
    I don't know how to day this without being too rude:
    You did not post your CSS. It is either in a "<style>" tag, in the "style" attribute or a separate file. There is no hint of this in any of the code you posted above.

  11. #11
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    Sorry. Tried to enter css, but got the following error:
    The text that you have entered is too long (73485 characters). Please shorten it to 10000 characters long.
    Suffice it to say, W3C said:
    W3C CSS Validator results for TextArea (CSS level 3)
    Congratulations! No Error Found.
    However, since you seem determined that the css is all screwed up, here's the link. Enjoy!http://mystuff.biz.ht/submit.css

  12. #12
    Join Date
    Nov 2013
    Posts
    41
    Thanks! Hmmm. Seems to work fine here: http://jsfiddle.net/DaAwesomeP/gX3dS/. Be sure you're using the HTML5 Doctype. What browsers have you tested it in?

  13. #13
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    Using <!DOCTYPE html> and the most current editions of IE, FF, CH, SF & OP. Now, back to the question, could it possibly be something regarding the new html5 semantics <nav> tag?

  14. #14
    Join Date
    Nov 2013
    Posts
    41
    Majot Error: I just noticed! You should not have the "role=navigation" on a nav element, only a div. Also try using a div with "role=navigation" (if you haven't already). Lastly try a regular div (with no "role=navigation").

    There might be a requirement of having only one nav per page. I still can't see why your code wouldn't work. It works fine in the Fiddle. It might be another style on your page affecting it. In FF, do a regular inspect element (not using Firebug) and see all of the rules affecting it (including the inherited ones). Make sure that the navs are not in any inline-elements (they are block-level, so that would screw them up).

    Maybe you'll find an answer here: http://stackoverflow.com/questions/1...ole-navigation. If you know what is making the nav work, than you can instead only apply the CSS rules that you want to the div.
    Last edited by DaAwesomeP; 11-09-2013 at 07:04 PM. Reason: To be more clear

  15. #15
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    139
    nav will not work in IE without "role=navigation".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles