Unobtrusive menu (JS)

Discussion in 'JavaScript' started by Smellypunks, Feb 7, 2010.

0
  1. #1
    I have been trying to make my own menu, I have it working with onclick but want it unobtrusive and seem to be failing.

    This is the JS:
    <script type="text/javascript">

var menu_status = new Array();

function unobtrusifier() {
	
	if(document.getElementById('mylinks')) {
			
	var links = document.getElementById('mylinks').getElementsByTagName('a');
				
	linklength = links.length;
				
	for(var i=0;i<linklength;i++) {
			
		links[i].onclick = function showHide(theid) { 
		alert(this.title);  
			if (document.getElementById) {
			var switch_id = document.getElementById(theid);
								
				
			if(menu_status[theid] != 'show') {
				switch_id.className = 'show';
				menu_status[theid] = 'show';
				
			}else{
				switch_id.className = 'hide';
				menu_status[theid] = 'hide';
				}
				}
			}
		}		
	}
}


var unobtrusifier = new domFunction(unobtrusifier, { 'bottom' : 'id'});



</script>
    Code (markup):

    Here is the HTML
    <body>
    <h1>Unobtrusive Javascript</h1>
        <div id="mylinks">
	<a   title="Go to my page1">Menu 1</a>
    	<div id="mymenu1" class="hide">
        		<a href="#" class="submenu">Link One here1</a>
        		<a href="#" class="submenu">Link Two here1</a>
        		<a href="#" class="submenu">Link Three here1</a>
        		<a href="#" class="submenu">Link Four here1</a>
    		</div>
	<br/>
	
	<a   title="Go to my page2">Menu 2</a>
    	<div id="mymenu2" class="hide">
        		<a href="#" class="submenu">Link One here2</a>
        		<a href="#" class="submenu">Link Two here2</a>
        		<a href="#" class="submenu">Link Three here2</a>
        		<a href="#" class="submenu">Link Four here2</a>
    		</div>
	</div>

    <ul>
    <li><a href="script/easy-as-pie-unobtrusive-javascript.js" title="View Javascript" id="bottom">View Javascript (with comments)</a></li>
    </ul>
</body>
    HTML:


    @ the moment the error I am getting is switch_id is null.
    If you can give me a push in the correct direction I would appreciate it.
    regards,
    Cam
     
    Smellypunks, Feb 7, 2010 IP
  2. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you ever thought about using a pure CSS menu, if not only for accessibility for all browsers
     
    krsix, Feb 8, 2010 IP
  3. patobrocks

    patobrocks Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I just found this answer to my prayers a couple of hours ago. I switched it all around for my uses but when the page loads/refreshes all of the li are closed.

    <!-- Created by TopStyle Trial - www.topstyle4.com -->
    <!-- from dareskog retrieved February 09, 2010 "Javascript expand/collapse menu's, collapsed on page load" Website: HTML Code Tutorial from http://www.htmlcodetutorial.com/help/sutra56604.html -->JS expand-collapse menu
    <html>
    <head>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();

    function showHide(theid){
    if (document.getElementById) {
    var switch_id = document.getElementById(theid);

    if(menu_status[theid] != 'show') {
    switch_id.className = 'show';
    menu_status[theid] = 'show';
    }else{
    switch_id.className = 'hide';
    menu_status[theid] = 'hide';
    }
    }
    }

    //-->
    </script>
    <style type="text/css">
    .menu1 {
    cursor: pointer;
    }
    .hide {
    display: none;
    }
    .show{
    display: block;
    }
    </style>
    </head>
    <body>
    <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
    <a href="#" class="submenu">Link One here</a>

    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
    <a href="#" class="submenu">Link One here</a>

    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
    <a href="#" class="submenu">Link One here</a>

    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="hide">
    <a href="#" class="submenu">Link One here</a>

    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="hide">
    <a href="#" class="submenu">Link One here</a>

    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    </body>
    </html>

    Hope this helps. I don't have a clue about script and I didn't have to muck with any of this.
     
    patobrocks, Feb 9, 2010 IP
  4. Smellypunks

    Smellypunks Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thanks for the idea krsix but I am not sure what I want is possible with just CSS. I am using it as more than an menu, really its the concertina effect I am using it for. I want the page have sections of content each of which under a heading which open one at a time when clicked on. As I say I have it working but was just trying to remove the JS from the HTML but had found it harder than a it should be.
     
    Smellypunks, Feb 10, 2010 IP