GetSimple Support Forum
Javascript dropdown navigation - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Scripts & Components (http://get-simple.info/forums/forumdisplay.php?fid=11)
+--- Thread: Javascript dropdown navigation (/showthread.php?tid=1846)

Javascript dropdown navigation - rbboyl - 2011-06-15

Hi, I am building a site with a main navigation with multiple sub-menus (javascript dropdown). Is it possible to integrate this menu with the GetSimple navigation tag? Instead of using nested ul and li tags, I have it set up like the following (code pasted below). How can I set this up so that when the user adds a page to the menu, it will add to the navigation? Obviously, I need to keep the classes intact for styling reasons and also the "rel" attributes in the main links are needed to link them to the submenu.

Code:
<div id="ddtopmenubar" class="mattblackmenu navi">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#" rel="ddsubmenu1">Buying</a></li>
                    <li><a href="#" rel="ddsubmenu2">Selling</a></li>
                    <li><a href="#" rel="ddsubmenu3">Resources</a></li>
                    <li><a href="#" rel="ddsubmenu4">About</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul id="ddsubmenu4" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>

Any help or advice would be appreciated!

Javascript dropdown navigation - mvlcek - 2011-06-15

rbboyl Wrote:Hi, I am building a site with a main navigation with multiple sub-menus (javascript dropdown).

Why do you want to do this with Javascript when all modern browsers support dropdown menus with CSS?

But if you really want to use Javascript, you can convert the nested lists to your desired form by e.g. using jQuery.

Javascript dropdown navigation - rbboyl - 2011-06-15

The dropdown menu uses jquery to give it a sliding/fading effect. I was able to nest the list and still have the menu work.

My revised question is how to add the rel="ddsubmenu1" attribute to the main links that have sub-menu items if GetSmple is generating the menu?

Updated code:
Code:
<ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#" rel="ddsubmenu1">Buying</a>
                        <ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
                    </li>
                    <li><a href="#" rel="ddsubmenu2">Selling</a>
                    <ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
                    </li>
                    <li><a href="#" rel="ddsubmenu3">Resources</a>
                    <ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
                    </li>
                    <li><a href="#" rel="ddsubmenu4">About</a>
                    <ul id="ddsubmenu4" class="ddsubmenustyle">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
                    </li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>


Javascript dropdown navigation - mvlcek - 2011-06-15

rbboyl Wrote:The dropdown menu uses jquery to give it a sliding/fading effect. I was able to nest the list and still have the menu work.

My revised question is how to add the rel="ddsubmenu1" attribute to the main links that have sub-menu items if GetSmple is generating the menu?

Supposing the uppermost ul has id menu, you should be able to do it with something like this:

Code:
$(function() {
  $('#menu li ul').each(i,ul) {
    $(ul).attr('id','ddsubmenu'+i);
    $(ul).closest('li').find('a:first').attr('rel','ddsubmenu'+i);
  }
});


Javascript dropdown navigation - rbboyl - 2011-06-15

So this is used in conjunction with the get_navigation() template tag?


mvlcek Wrote:
rbboyl Wrote:The dropdown menu uses jquery to give it a sliding/fading effect. I was able to nest the list and still have the menu work.

My revised question is how to add the rel="ddsubmenu1" attribute to the main links that have sub-menu items if GetSmple is generating the menu?

Supposing the uppermost ul has id menu, you should be able to do it with something like this:

Code:
$(function() {
  $('#menu li ul').each(i,ul) {
    $(ul).attr('id','ddsubmenu'+i);
    $(ul).closest('li').find('a:first').attr('rel','ddsubmenu'+i);
  }
});


Javascript dropdown navigation - mvlcek - 2011-06-15

rbboyl Wrote:So this is used in conjunction with the get_navigation() template tag?

get_i18n_navigation() from the I18N plugin.
get_navigation does not support hierarchical menus.

Javascript dropdown navigation - rbboyl - 2011-06-15

mvlcek Wrote:
rbboyl Wrote:So this is used in conjunction with the get_navigation() template tag?

get_i18n_navigation() from the I18N plugin.
get_navigation does not support hierarchical menus.

Thanks! I will give it a shot.