SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with JS for a Navbar style navigation

    Hello,

    I was wondering if someone can lead me in the right direction to get my navigation working. In modern browsers, you'll see sub pages when you hover over Services or Getting Started.

    Basically, I need something that will allow it to work in IE 6 and something that will make it so that when you are currently on any page in the Services category or any page in the Getting Started category, the child menu items will stay displayed.

    I had something working with CSS last night, but with the child menu items being displayed, it messed things up when you hovered over the next parent item because the children all overlapped each other. (Hope I'm making sense here)

    A friend showed me this jquery solution (click examples and then nav-bar style), but I'm not sure it's something I want to use. I don't really need the special "fade in" effect that I see.

    Ideas? TIA!

  2. #2
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    There are many ways to do this. you need to give some details as to how the menu is working currently.
    Ideally, something is triggering the menu to appear (the mouse hovering over the menu item), so either simulate the trigger, or call the same methods that are called once triggered, if you are on that page. in other words, if you have a javascript function that makes the menu appear if the mouse is hovering over the menu item, call that function if you are on said page. Or if you using css, in the code that writes the menu, check to see what page you are on, and style the menu items accordingly.

    Hope this helps
    Cheers

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I should tell you that I don't know javascript at all.

    The way the menu is working in modern browsers is this CSS:

    #menu li ul { /*Hides child sub items*/
    position: absolute;
    left: -999em;
    }
    #menu li:hover ul, #menu li.hover ul { /*Displays child sub items when hovering*/
    top:auto;
    left: 380px;
    }

    It works perfectly. The only problem I have is that when you are click on, say this page, the child sub items aren't showing. I want them to be displayed the whole time you're in the Services section.

    And IE 6 isn't doing anything right at all (as usual).

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way that I can think to do it, is to create another css style, that duplicate you selected menu

    Code:
    #menu li:hover ul, #menu li.hover ul, #menu li.selected ul { /*Displays child sub items when hovering*/
    top:auto;
    left: 380px;
    }
    So now find the <li> tag (the menu item) in the element with ID "menu", that is for the currently selected page, and give it a class "selected".
    You will have to do this with what ever server side language you are using.
    Here is the suedo code for that basic process

    Code:
    // code to create menu
    for(menu items)
      create menu item
      if(menu item = selected page)
        li tag class = "selected"
    This is the easiest way I can think of...

  5. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for your help. Would it be possible to have some help in writing the js? I really have no clue about it.

    Also, I found this and changed what I thought referred to the id and class. Would something like this work?

    Code:
    //drop down menus
    sfHover = function() {
    	var sfEls = document.getElementById("menu").getElementsByTagName("li");
    	for (var i=0; i < sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" menuactive";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" menuactive\\b"), "");
    		}
    	}
    }
    
    if (window.attachEvent) window.attachEvent("onload", sfHover);

  6. #6
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahaa

    This looks like the code to do the actual mouse overs etc..
    Again there are a few ways to do this, but first, what server side language are you using? If any... (eg, php, asp, asp.net etc.)
    The reason i am asking is because I don't know how to get the current script name in javascript, thus you'll have to get it from the server side language you are using?

  7. #7
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This menu is working inside a cms (cmsmadesimple.org). So, I believe it's called a smarty template that's powering the menu? I'm not sure what info to give you.

    Here's the code in that template:

    Code:
    {* CSS classes used in this template:
    #menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
    #menu - The id for the <ul>
    .menuparent - The class for each <li> that has children.
    .menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
    {if $count > 0}
    <div id="menuwrapper">
    <ul id="menu">
    {foreach from=$nodelist item=node}
    {if $node->depth > $node->prevdepth}
    
    	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
    {elseif $node->depth < $node->prevdepth}
    
    	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
    	</li>
    {elseif $node->index > 0}</li>
    {/if}
    {if $node->parent == true or ($node->current == true and $node->haschildren == true)}
    	<li class="menuactive menuparent"><a class="menuactive menuparent" 
    {elseif $node->current == true}
    	<li class="menuactive"><a class="menuactive" 
    {elseif $node->haschildren == true}
    	<li class="menuparent"><a class="menuparent" 
    {elseif $node->type == 'sectionheader'}
            <li class="sectionheader"><span> {$node->menutext} </span>
    {elseif $node->type == 'separator'}
            <li style="list-style-type: none;"> <hr class="separator" />
    {else}
    	<li><a 
    {/if}
    {if $node->type != 'sectionheader' and $node->type != 'separator'}
    href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
    {elseif $node->type == 'sectionheader'}
    ><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
    {/if}
    
    {/foreach}
    
    	{repeat string="</li></ul>" times=$node->depth-1}		</li>
    	</ul>
    <div class="clearb"></div>
    </div>
    {/if}

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the name of that script in the CMS?

  9. #9
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure. But the CMS is CMS Made Simple.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    O. The reason that I ask, is because it seems you going to have to edit the CMS script to get this to work. Well thats the only way I see this working. I downloaded that CMS app and had a quick look for the script that does the menu, but couldn't find it. Unfortunately I cant sit at work and look through all the scripts for that script, so if you could possibly find that script I could try mod the code

  11. #11
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help on this. I don't want you to have to spend too much time on it, so I'm thinking I'm going to try that jquery and see if I can get it working.

    But I did post the script for the menu in post #7.


Bookmarks

Posting Permissions

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