Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript dropdown navigation
#1
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!
Reply
#2
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.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#3
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>
Reply
#4
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);
  }
});
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#5
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);
  }
});
Reply
#6
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.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#7
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.
Reply




Users browsing this thread: 1 Guest(s)