SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question - Drop down menu -

    Pffff

    Who can help me?

    I must add my site a menu that has one button

    like;

    deviantart.com // Categories menu...

    When I click once, options must show, and go down (animated)...

    I couldn't find what I want

    a link or codes.. Pleasee...

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ??? Nobody???

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you need one menu that generates contents for another, or a dropdown menu?

  4. #4
    SitePoint Member
    Join Date
    May 2003
    Location
    Connecticut
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want one that works exactly like the deviantart.com Categories menu? Or would something like the one at the bottom of developertutorials.com work?

    The one at deviantart.com is very complex but I can help with the other one at developertutorials.com if you would like.

  5. #5
    SitePoint Member
    Join Date
    May 2003
    Location
    Connecticut
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, sorry I did not notice your post Kon-Tiki, got caught up and forgot to refresh before posting.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No sweat. Important thing's that this guy's helped out :P

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, like deviantart.com's categories menu, but I didn't mean I wanna it's all function, I mean, drop down function is like deviantart.com's categories menu..

    did u get? menu which has only one button, when click; drop down..

    mmm... how can I find?

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want a function that does this?

    Code:
    Categories
    |
    |--> Category 1  ----> Subcategory 1
    |                ----> Subcategory 2
    |
    |--> Category 2  ----> Subcategory 1
                     ----> Subcategory 2
    Or without the subcategories?

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the same (categories & subcategories) of Deviantart.com's categories menu...

    not clear enough?

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's clear enough Let's see how to do that... Give me a bit of time on this

  11. #11
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    <script type="text/javascript">
    	// These are necessary for switching between visible and invisible
    	var showing_cats = 0;
    	var showing_subs_1 = 0;
    	var showing_subs_2 = 0;	
    	var showing_subs_3 = 0;	
     
    	function show_cats() {
    		if (showing_cats == 0) {
    			// Turns all categories visible
    			cat_01.style.display="block";
    			cat_02.style.display="block";
    			cat_03.style.display="block";
    			showing_cats = 1;
    		}
    		else {
    			// Turns all categories invisible
    			cat_01.style.display="none";
    			cat_02.style.display="none";
    			cat_03.style.display="none";
    			showing_cats = 0;		
     
    			// Turns all subcategories invisible
    			subcat_01.style.display="none";
    			subcat_02.style.display="none";
    			subcat_03.style.display="none";
    			showing_subs_1 = 0;					
     
    			subcat_04.style.display="none";
    			subcat_05.style.display="none";
    			showing_subs_2 = 0;
     
    			subcat_06.style.display="none";
    			subcat_07.style.display="none";
    			subcat_08.style.display="none";
    			showing_subs_3 = 0;
    		}				
    	}
     
    	function show_subs(sub_cat) {
    		switch (sub_cat) {
    			case 1:
    				if (showing_subs_1 == 0) {
    					// Turns the selected category's subcategories visible
    					subcat_01.style.display="block";
    					subcat_02.style.display="block";
    					subcat_03.style.display="block";
    					showing_subs_1 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					subcat_04.style.display="none";
    					subcat_05.style.display="none";
    					showing_subs_2 = 0;
     
    					subcat_06.style.display="none";
    					subcat_07.style.display="none";
    					subcat_08.style.display="none";
    					showing_subs_3 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					subcat_01.style.display="none";
    					subcat_02.style.display="none";
    					subcat_03.style.display="none";
    					showing_subs_1 = 0;
    				}
    				break;
     
    			case 2:
    				if (showing_subs_2 == 0) {
    					// Turns the selected category's subcategories visible
    					subcat_04.style.display="block";
    					subcat_05.style.display="block";
    					showing_subs_2 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					subcat_01.style.display="none";
    					subcat_02.style.display="none";
    					subcat_03.style.display="none";
    					showing_subs_1 = 0;
     
    					subcat_06.style.display="none";
    					subcat_07.style.display="none";
    					subcat_08.style.display="none";
    					showing_subs_3 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					subcat_04.style.display="none";
    					subcat_05.style.display="none";
    					showing_subs_2 = 0;
    				}
    				break;
     
    		case 3:
    				if (showing_subs_3 == 0) {
    					// Turns the selected category's subcategories visible
    					subcat_06.style.display="block";
    					subcat_07.style.display="block";
    					subcat_08.style.display="block";
    					showing_subs_3 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					subcat_04.style.display="none";
    					subcat_05.style.display="none";
    					showing_subs_2 = 0;
     
    					subcat_01.style.display="none";
    					subcat_02.style.display="none";
    					subcat_03.style.display="none";
    					showing_subs_1 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					subcat_06.style.display="none";
    					subcat_07.style.display="none";
    					subcat_08.style.display="none";
    					showing_subs_3 = 0;
    				}
    				break;		
    		}
     
    	}
    </script>
    Code HTML4Strict:
    <html><head><link href="test.css" rel="stylesheet" type="text/css" /></head><body>
    <div class="main" onclick="show_cats();">Main header</div>
    <div class="category" id="cat_01" onclick="show_subs(1);">Category 1</div>
    <div class="category" id="cat_02" onclick="show_subs(2);">Category 2</div>
    <div class="category" id="cat_03" onclick="show_subs(3);">Category 3</div>
     
    <div class="subcategory" id="subcat_01">Subcategory 1</div>
    <div class="subcategory" id="subcat_02">Subcategory 2</div>
    <div class="subcategory" id="subcat_03">Subcategory 3</div>
     
    <div class="subcategory" id="subcat_04">Subcategory 4</div>
    <div class="subcategory" id="subcat_05">Subcategory 5</div>
     
    <div class="subcategory" id="subcat_06">Subcategory 6</div>
    <div class="subcategory" id="subcat_07">Subcategory 7</div>
    <div class="subcategory" id="subcat_08">Subcategory 8</div>
     
    </body></html>
    And for CSS:
    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    div.main {
    	border: 1px solid #000000;
    	width: 400px;
    	background-color: #FF0000;
    }
     
    div.category {
    	border: 1px solid #000000;
    	width: 300px;
    	background-color: #00FF00;
    	display: none;
    }
     
    div.subcategory {
    	border: 1px solid #000000;
    	width: 200px;
    	background-color: #0000FF;
    	display: none;
    }

    In this example, the categories and subcategories appear under each other. This can be changed to next to each other through the CSS.

    Also, this version is not W3C-compliant. I kept getting these warnings in Firebug console:
    By ID/NAME in the global scope refered element. Use document.getElementById() instead, according the W3C-standard.
    [Break on this error] undefined
    Maybe someone here might be able to polish this up so it's W3C-compliant.

  12. #12
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('cat_01').style.display="block";
    etc.
    Ian Anderson
    www.siteguru.co.uk

  13. #13
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Urgh, when I tried, I must've forgotten the quotes around the ID name
    Ok, new Javascript part, fully W3C-compliant now:
    Code JavaScript:
    <script type="text/javascript">
    	// These are necessary for switching between visible and invisible
    	var showing_cats = 0;
    	var showing_subs_1 = 0;
    	var showing_subs_2 = 0;	
    	var showing_subs_3 = 0;	
     
    	function show_cats() {
    		if (showing_cats == 0) {
    			// Turns all categories visible
    			document.getElementById("cat_01").style.display="block";
    			document.getElementById("cat_02").style.display="block";
    			document.getElementById("cat_03").style.display="block";
    			showing_cats = 1;
    		}
    		else {
    			// Turns all categories invisible
    			document.getElementById("cat_01").style.display="none";
    			document.getElementById("cat_02").style.display="none";
    			document.getElementById("cat_03").style.display="none";
    			showing_cats = 0;		
     
    			// Turns all subcategories invisible
    			document.getElementById("subcat_01").style.display="none";
    			document.getElementById("subcat_02").style.display="none";
    			document.getElementById("subcat_03").style.display="none";
    			showing_subs_1 = 0;					
     
    			document.getElementById("subcat_04").style.display="none";
    			document.getElementById("subcat_05").style.display="none";
    			showing_subs_2 = 0;
     
    			document.getElementById("subcat_06").style.display="none";
    			document.getElementById("subcat_07").style.display="none";
    			document.getElementById("subcat_08").style.display="none";
    			showing_subs_3 = 0;
    		}				
    	}
     
    	function show_subs(sub_cat) {
    		switch (sub_cat) {
    			case 1:
    				if (showing_subs_1 == 0) {
    					// Turns the selected category's subcategories visible
    					document.getElementById("subcat_01").style.display="block";
    					document.getElementById("subcat_02").style.display="block";
    					document.getElementById("subcat_03").style.display="block";
    					showing_subs_1 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					document.getElementById("subcat_04").style.display="none";
    					document.getElementById("subcat_05").style.display="none";
    					showing_subs_2 = 0;
     
    					document.getElementById("subcat_06").style.display="none";
    					document.getElementById("subcat_07").style.display="none";
    					document.getElementById("subcat_08").style.display="none";
    					showing_subs_3 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					document.getElementById("subcat_01").style.display="none";
    					document.getElementById("subcat_02").style.display="none";
    					document.getElementById("subcat_03").style.display="none";
    					showing_subs_1 = 0;
    				}
    				break;
     
    			case 2:
    				if (showing_subs_2 == 0) {
    					// Turns the selected category's subcategories visible
    					document.getElementById("subcat_04").style.display="block";
    					document.getElementById("subcat_05").style.display="block";
    					showing_subs_2 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					document.getElementById("subcat_01").style.display="none";
    					document.getElementById("subcat_02").style.display="none";
    					document.getElementById("subcat_03").style.display="none";
    					showing_subs_1 = 0;
     
    					document.getElementById("subcat_06").style.display="none";
    					document.getElementById("subcat_07").style.display="none";
    					document.getElementById("subcat_08").style.display="none";
    					showing_subs_3 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					document.getElementById("subcat_04").style.display="none";
    					document.getElementById("subcat_05").style.display="none";
    					showing_subs_2 = 0;
    				}
    				break;
     
    		case 3:
    				if (showing_subs_3 == 0) {
    					// Turns the selected category's subcategories visible
    					document.getElementById("subcat_06").style.display="block";
    					document.getElementById("subcat_07").style.display="block";
    					document.getElementById("subcat_08").style.display="block";
    					showing_subs_3 = 1;					
     
    					// Turns all other categories' subcategories invisible, so as not to show more than 1
    					document.getElementById("subcat_04").style.display="none";
    					document.getElementById("subcat_05").style.display="none";
    					showing_subs_2 = 0;
     
    					document.getElementById("subcat_01").style.display="none";
    					document.getElementById("subcat_02").style.display="none";
    					document.getElementById("subcat_03").style.display="none";
    					showing_subs_1 = 0;
    				}
    				else {
    					// Turns the selected category's subcategories invisible
    					document.getElementById("subcat_06").style.display="none";
    					document.getElementById("subcat_07").style.display="none";
    					document.getElementById("subcat_08").style.display="none";
    					showing_subs_3 = 0;
    				}
    				break;		
    		}
     
    	}
    </script>

  14. #14
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, made it a bit more flexible, and with less code:
    Code JavaScript:
    <script type="text/javascript">
    	var showing_cats = 0;	// Toggles between showing and not showing categories
    	var showing_sub = 0;	// Toggles between no subcategories and which subcat that does show
    	var amount_cats = 3;	// Put the amount of categories here
    	var subcat_1 = new Array("1","2","3");	// Put the numbers of the first category here
    	var subcat_2 = new Array("4","5");		// Put the numbers of the second category here
    	var subcat_3 = new Array("6","7","8");	// Put the numbers of the third category here
    	var subcats = new Array(subcat_1, subcat_2, subcat_3);	// Put all subcategories' arrays in here
     
    	// ** You can add as many subcat_x as you want. Just don't forget to add them to subcats as well 	**
    	// ** and to change amount_cats accordingly. 														**
     
     
     
    	// Loops through Subcats
    	// If the current subcat index is the one containing the subcat_x we need
    	// We loop through that and set every element's style to show.
    	// Finishing up, we keep track of which subcat_x is showing at the moment
     
     
    	function turn_subcat_on(subcat) {
    		for (var i = 0; i < amount_cats; i++) {
    			if (i == subcat-1) {
    				for (var j = 0; j < subcats[i].length; j++) 
    					document.getElementById("subcat_" + subcats[i][j]).style.display="block";
    			}
    		}
    		showing_sub = subcat;
    	}
     
     
     
    	// Goes through subcat for as many times as there are categories (which should be the same amount as there are subcat_x
    	// Set every element's style to be hidden
    	// Finish up by setting showing_sub to no subcategories showing
     
     
    	function turn_subcat_off() {
    		for (var i = 0; i < amount_cats; i++) {
    			for (var j = 0; j < subcats[i].length; j++) 
    				document.getElementById("subcat_" + subcats[i][j]).style.display="none";
    		}
    		showing_sub = 0;
    	}
     
     
     
    	// Goes through the amount of categories
    	// And sets every category's style to show
    	// Then keeps track that all categories are showing
     
     
    	function turn_cat_on() {
    			for(var i = 1; i <= amount_cats; i++) 
    				document.getElementById("cat_" + i).style.display="block";
    			showing_cats = 1;
    	}
     
     
     
    	// Goes through the amount of categories
    	// And sets every category's style to be hidden
    	// Then hides all subcategories as well
    	// And keeps track that all categories are invisible now
     
     
    	function turn_cat_off() {
    			for(var i = 1; i <= amount_cats; i++)
    				document.getElementById("cat_" + i).style.display="none";
    			turn_subcat_off();
    			showing_cats = 0;
    	}
     
     
     
    	// Checks if all categories are showing
    	// If they're not showing yet, turn them on
    	// Otherwise, turn them off
     
     
    	function show_cats() {
    		if (showing_cats == 0) turn_cat_on();
    		else turn_cat_off();
    	}
     
     
     
    	// Keeps track of which subcategory is showing already, as this will be erased in the functions called next
    	// Turns off all categories
    	// If the newly-selected category isn't the old one, show the new category (otherwise, it should hide it again, which already happened by now)
     
     
    	function show_subs(sub_cat) {
    		var old_sub = showing_sub;
    		turn_subcat_off();
    		if (old_sub != sub_cat) turn_subcat_on(sub_cat);
    	}
    Code HTML4Strict:
    <html><head><link href="test.css" rel="stylesheet" type="text/css" /></head><body>
    <div class="main" onclick="show_cats();">Main header</div>
    <div class="category" id="cat_1" onclick="show_subs(1);">Category 1</div>
    <div class="category" id="cat_2" onclick="show_subs(2);">Category 2</div>
    <div class="category" id="cat_3" onclick="show_subs(3);">Category 3</div>
     
    <div class="subcategory" id="subcat_1">Subcategory 1</div>
    <div class="subcategory" id="subcat_2">Subcategory 2</div>
    <div class="subcategory" id="subcat_3">Subcategory 3</div>
     
    <div class="subcategory" id="subcat_4">Subcategory 4</div>
    <div class="subcategory" id="subcat_5">Subcategory 5</div>
     
    <div class="subcategory" id="subcat_6">Subcategory 6</div>
    <div class="subcategory" id="subcat_7">Subcategory 7</div>
    <div class="subcategory" id="subcat_8">Subcategory 8</div>
     
    </body></html>


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
  •