1

i have a section in the content area of my site that has a list of links that have sublinks in them.

so that the users click the least amount as possible, i figured a drop down menu would be best, then that link would take them into the page, etc.

i know nothing about javascript or jquery so all the examples i find are little to no use to me because i don't even know where to begin to modify them to suit my needs.

what i would like to have happen: when a user clicks the link a list drops down from it with all the sub pages.

PAGE LINK 1
|--sub page
|--sub page

PAGE LINK 2
|--sub page
|--sub page

jsFiddle link: http://jsfiddle.net/hHn7b/

the only thing i need it to do is while it does toggle the display of the sub pages, i need it to also when another link is clicked it will close the previously opened drop down menu. (think along the lines of how a radio button functions)

i am not scared to use javascript or even that jquery stuff on this if i need to, but i don't know enough to do it myself, and i don't have the time currently to attempt and learn how to or even enough to modify other's jquery code they post on other questions in this site.

Below is the code from the jsFiddle:

HTML:

<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd');">PAGE LINK 1</span>
</div>
<div id="dl_sub_dd">
    <ul>
        <li>sub page</li>
        <li>sub page</li>
    </ul>
</div>
<!--end dept_links_sub-->
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd1');">PAGE LINK 2</span>
</div>
<div id="dl_sub_dd1">
    <ul>
        <li>sub page</li>
        <li>sub page</li>
    </ul>
</div>

CSS:

span {
    cursor:pointer;
}
#dl_sub_dd, #dl_sub_dd1 {
    display:none;
}

JS:

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
tbodt
  • 16,609
  • 6
  • 58
  • 83
hrhartist
  • 25
  • 1
  • 4

2 Answers2

0

Here:

Fiddle: http://jsfiddle.net/nkKja/

I used jQuery for this, as it makes things so much easier, and you said you had no problem with that.

What happens:

  1. When a link is clicked, this line
    var submenu = $(this).parent().children('.dl_sub_dd'); first goes to the parent-element of the link, and from there searches for a child-element with class .dl_sub_dd.
  2. Next, the code checks whether that child-element is visible. If not, it makes it visible (first hiding any other submenu's that might be showing. If it is visible, the code only hides the submenu for which the link was clicked.

HTML: (both elements are identical, except for the 'PAGE LINK 1' text)

<div class="dl_parent">
    <div class="dl_link">PAGE LINK 1</div>
    <div class="dl_sub_dd">
        <ul>
            <li>sub page</li>
            <li>sub page</li>
        </ul>
    </div>
</div>

CSS:

.dl_link {
    cursor:pointer;
}
.dl_sub_dd {
    display:none;
}

JS:

$(window).on('load',function(){
    $('.dl_link').click(function(){
        var submenu = $(this).parent().children('.dl_sub_dd');
        if (submenu.css('display') == 'none') {
            $('.dl_sub_dd').hide(); //first hide any previously showing submenu's
            submenu.show(); //then show the current submenu
        } else {
            submenu.hide(); //hide the current submenu again
        }
    });
});

UPDATE

When implementing the code on your website, I always like to be real organized. I always do it like this:

  • Have one index.php. In that you put require('page/websitename.php');
  • In the page/websitename.php, you put your HTML-page.

  • All your JS is in external files, and you link to that on your page in the <head></head> like this:
    <script type="text/javascript" src="js/websitename.js"></script>

  • Link to library files (like jQuery) like this:
    <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>

  • Php-files are in a php-foldes, images in a img-folder, etc



You'll have a structure like this:

▼ [Main folder]
         css
            websitename.admin.css
            websitename.css
            websitename.login.css
    ► img
         js
            websitename.admin.js
            websitename.js
    ▼ lib
            jquery
                jquery.min.js
            [other library]
            [other library]
         page
            websitename.admin.php
            websitename.login.php
            websitename.php
    ► php
        index.php



The php-folder (which is closed in this overbiew) might have another subfolder "admin" for php-scripts used exclusively by the admin page.
The img-folder may also have a sub-structure..

You get the point:)

myfunkyside
  • 3,890
  • 1
  • 17
  • 32
  • so if I add more PAGE LINKs with the dl_sub_dd submenus, the only code I have to update is the html with the same code shown in the html and the js will cooperate with the other menus? – hrhartist Jun 11 '14 at 14:29
  • jep, you can try that by adding some more PAGE LINKS in the fiddle – myfunkyside Jun 11 '14 at 14:48
  • oh yea. that would be the way to go :P mind is so stressed, i'll try that! also, where do I put the jquery code? is it with the html in the head section, can I place it in an external file(what would be it's file extension) – hrhartist Jun 11 '14 at 18:26
  • I updated my answer with an elaborate explanation on how I organize things. Let me know if something still isn't clear – myfunkyside Jun 11 '14 at 19:40
  • I hope I am not sounding ignorant on this, so sorry ahead of time if I am. the source on your script tag, you reference lib/jquery/jquery.min.js is that what I have to save the file name as, .min.js for a jquery file? because like you I prefer cleaner code, but don't like to put anything put html code within my index.html files if I can help it – hrhartist Jun 11 '14 at 23:37
  • (1) Save your own script (the JS code above, along with the rest of your code) as this "websitename.js". That's the filename of your code, the code you wrote. (2) Download the latest jQuery library from their website [here](http://jquery.com/download/) Choose [Download the compressed, production jQuery 1.11.1](http://code.jquery.com/jquery-1.11.1.min.js). THAT is the "jquery.min.js", that's the library. (The original name is "jquery-1.11.1.min.js", but I remove the number so I can easy replace the file with a newer one in the future without having to change the link in my code.) out of chars.. – myfunkyside Jun 12 '14 at 04:14
  • ...continued... The "min.js" has nothing to do with the fact that it is a jquery script. ".js" is the extension for JavaScript files. The "min" stands for "minimized", meaning the script had been brought back to as few characters as possible. If you open the file you'll, you can't make head nor tails of it, but that way the computer can run the code faster.. – myfunkyside Jun 12 '14 at 04:22
  • So again, (1) save your own script as "websitename.js", if you have more scripts specify betwe0ne the scripts by using sub-names like this "websitename.subname.js". Put your files in the "js"-folder. (2) download the jquery, rename it to "jquery.min.js" and put that in the "lib/jquery/"-folder. (3) Link to those files in your HTML (in the head-section) like I showed in my update, and your good to go. – myfunkyside Jun 12 '14 at 04:24
0

Here's a script I actually use in production that does exactly what you're looking for. Basically the same idea as what @myfunkyside already posted, but with a few small enhancements.

  1. It uses jQuery's slide animation for smoother user interaction
  2. You can nest sub menus in the main menu as deep as you want
  3. When the page loads, it opens the menu and highlights the link to the current page by matching it to the URL, which helps the user orient somewhat. This function is hyphen and dash friendly.

jsFiddle here: http://jsfiddle.net/contendia/ddXBU/4/

CSS:

<style>
#leftmenu h3 {
    margin:0;
    padding:2px 5px;
    border-top:1px solid #006699;
    border-bottom:1px solid #003366;
    cursor:pointer;
    background-color:#0e559d;
    color:#ffffff;
    text-align:left;
}
#leftmenu h3:hover {
    background-color:#003366;
}
#leftmenu > ul {
    margin:0;
    padding:0;
}
#leftmenu > ul li {
    padding-left:10px;
    list-style-type:none;
}
#leftmenu > ul li a {
    color:#666666;
    font-weight:bold;
    text-decoration:none;
}
#leftmenu > ul li a:hover {
    text-decoration:underline;
}
#leftmenu .current {
    color:#006699;
    text-decoration:underline;
}
</style>

JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // Get the URI path and strip the leading slash
    var path = $(location).attr('pathname').replace(/\//, ""); 
    // Get and append the querystring
    path += $(location).attr('search');
    // Hide everything
    $('#leftmenu ul').hide();        
    // Go up 2 levels (a > li > ul) and open. Hide all others.
    $('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown();

    $('#leftmenu h3').click( 
        function() {
            var $this = $(this);
            $this.next('ul').siblings('ul').slideUp();
            $this.next('ul').find('ul').slideUp();
            $this.next().slideToggle(300); 
    });
});
</script>

HTML:

<div id="leftmenu">
<h3>First Menu</h3>
<ul>
    <li><a href="page_number_one">Underscores</a></li>
    <li><a href="page-number-two">Hyphens</a></li>
</ul>

<h3>Second Menu</h3>
<ul>
    <li><a href="page_number_three">Underscores</a></li>
    <li><a href="page-number-four">Hyphens</a></li>
    <li>
        <h3>Sub Menu</h3>
<ul>
    <li><a href="sub_page_number_one">Underscores</a></li>
    <li><a href="sub-page-number-two">Hyphens</a></li>
</ul>
    </li>
</ul>
</div>
contendia
  • 161
  • 2
  • 9