Results 1 to 7 of 7

Thread: Slashdot Menu - Non-Links

  1. #1
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slashdot Menu - Non-Links

    1) Script Title: Slashdot Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

    3) Describe problem: The menu works great. The only problem I'm having is I can not add simple text under any menu. When I put text inder one of my headings in the menu, the entire menu messes up and doesn't work. The only work around I have found it do make a table and wrap it in <a></a> tags but it turns it into a link, or course.

    I'm trying to add a table with text under a menu heading. Is this possible with what I have?

    Test site: http://www.alloutassault.net/alpha/

    CSS:
    Code:
    div.sdmenu {
    	width: 226px;
    	font-family: Arial, sans-serif;
    	font-size: 12px;
    	padding-bottom: 0px;
    	letter-spacing: 0.5cm
    	color: #fff;
    }
    
    div.sdmenu div {
    	background: url(menu.jpg) repeat-x;
    	overflow: hidden;
    }
    
    div.sdmenu div:first-child {
    	background: url(menu.jpg) no-repeat;
    }
    
    div.sdmenu div.collapsed {
    	height: 56px;
    }
    div.sdmenu div span {
    	display: block;
    	margin: 0px 0px 0px 0px;
    	padding: 21px 0px;
    	font-weight: bold;
    	color: white;
        text-align: center;
    	cursor: default;
    
    }
    
    div.sdmenu div.collapsed span {
    
    }
    div.sdmenu div a {
    	background : url(menu_spacer_2.jpg) repeat-y left top;
    	margin: 0px 0px 0px 0px;
    	padding: 5px 40px;
    	display: block;
    	color: #ffffff;
    }
    
    
    div.sdmenu div a.current {
    	background : #333333 url(menu_spacer_2.jpg) repeat-y left top;
    }
    
    div.sdmenu div a:hover {
    	background : #333333 url(menu_spacer_over.jpg) repeat-y left top;
    	color: #ffffff;
    	text-decoration: none;
    }
    
    .sdmenu .title, .sdmenu .titlehidden, .sdmenu .submenu a {
      width: 226px;
      height: 56px;
    }
    JS:
    Code:
    function SDMenu(id) {
    	if (!document.getElementById || !document.getElementsByTagName)
    		return false;
    	this.menu = document.getElementById(id);
    	this.submenus = this.menu.getElementsByTagName("div");
    	this.remember = true;
    	this.speed = 3;
    	this.markCurrent = true;
    	this.oneSmOnly = true;
    }
    SDMenu.prototype.init = function() {
    	var mainInstance = this;
    	for (var i = 0; i < this.submenus.length; i++)
    		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
    			mainInstance.toggleMenu(this.parentNode);
    		};
    	if (this.markCurrent) {
    		var links = this.menu.getElementsByTagName("a");
    		for (var i = 0; i < links.length; i++)
    			if (links[i].href == document.location.href) {
    				links[i].className = "current";
    				break;
    			}
    	}
    	if (this.remember) {
    		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
    		var match = regex.exec(document.cookie);
    		if (match) {
    			var states = match[1].split("");
    			for (var i = 0; i < states.length; i++)
    				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
    		}
    	}
    };
    SDMenu.prototype.toggleMenu = function(submenu) {
    	if (submenu.className == "collapsed")
    		this.expandMenu(submenu);
    	else
    		this.collapseMenu(submenu);
    };
    SDMenu.prototype.expandMenu = function(submenu) {
    	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var links = submenu.getElementsByTagName("a");
    	for (var i = 0; i < links.length; i++)
    		fullHeight += links[i].offsetHeight;
    	var moveBy = Math.round(this.speed * links.length);
    	
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight + moveBy;
    		if (newHeight < fullHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "";
    			mainInstance.memorize();
    		}
    	}, 30);
    	this.collapseOthers(submenu);
    };
    SDMenu.prototype.collapseMenu = function(submenu) {
    	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight - moveBy;
    		if (newHeight > minHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "collapsed";
    			mainInstance.memorize();
    		}
    	}, 30);
    };
    SDMenu.prototype.collapseOthers = function(submenu) {
    	if (this.oneSmOnly) {
    		for (var i = 0; i < this.submenus.length; i++)
    			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
    				this.collapseMenu(this.submenus[i]);
    	}
    };
    SDMenu.prototype.expandAll = function() {
    	var oldOneSmOnly = this.oneSmOnly;
    	this.oneSmOnly = false;
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className == "collapsed")
    			this.expandMenu(this.submenus[i]);
    	this.oneSmOnly = oldOneSmOnly;
    };
    SDMenu.prototype.collapseAll = function() {
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className != "collapsed")
    			this.collapseMenu(this.submenus[i]);
    };
    SDMenu.prototype.memorize = function() {
    	if (this.remember) {
    		var states = new Array();
    		for (var i = 0; i < this.submenus.length; i++)
    			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
    		var d = new Date();
    		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
    	}
    };
    HTML:
    Code:
        <div style="float: left" id="my_menu" class="sdmenu">
          <div>
            <span>Main Menu</span>
    
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Enlist</a>
            <a href="#">Forum</a>
          </div>
          
          <div>
            <span>Divisions</span>
    
            <a href="#">Divsion 1</a>
            <a href="#">Divsion 2</a>
            <a href="#">Divsion 3</a>
            <a href="#">Divsion 4</a>
          </div>
          
          <div>
            <span>Calendar</span>
            <!-- Testing Text --><!-- Doesn't work! -->
            <!-- <div>Testing Text</div> --><!-- Doesn't work! -->
          </div>
    
          <div>
            <span>Roster</span>
            
             <a href="#">Wstar</a>
             <a href="#">Wstar</a>
             <a href="#">Wstar</a>
             <a href="#">Wstar</a>
             <a href="#">Wstar</a>
          </div>
          
          <div>
            <span>Miscenalleous</span>
            
              <a href="#">Contributions</a>
              <a href="#">Donate</a>
              <a href="#">Merchandise</a>
          </div>
          
          <div>
            <span>Information</span>
            
              <a href="#">Links</a>
              <a href="#">About Us</a>
              <a href="#">Contact Us</a>
          </div>
          
          <div>
            <span></span>
          </div>
    
          
        </div>

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Certain container tags like DIV have special meaning with SD Menu, though you should be able to use other container tags like P to display regular text under a menu header. Using P for example, this works:

    Code:
        <div style="float: left" id="my_menu" class="sdmenu">
          <div>
            <span>Online Tools</span>
    <p class="regular">Welcome to our site. Hope you enjoy the links below!</p>
            <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
            <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
            <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
            <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
            <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
            <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
          </div>
          <div>
            <span>Support Us</span>
            <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
    "
    "
    In the .css file, you'll want to add this to the very end to give the text block the appropriate look:

    Code:
    div.sdmenu p.regular{
    background: white;
    overflow: auto;
    color: black;
    margin: 0;
    padding: 5px;
    }

  3. #3
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Seems to work but the menu jumps. It starts scrolls nicely down, then when it reaches the links - it just jumps to fully expanded. Also, I must put a link for it to collapse and expand. Is there a way so i don't need a link under the menu?

    Any ideas?

    BTW, thanks again for the reply.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm I'm not getting any jolting, though I am using the default example in the zip file as basis for the changes above. Try adding a valid doctype to the top of your page perhaps:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    With regards to arbitrary links that expand/ contract the menu, per the info on the demo page, the script does support the following methods:

    Code:
    // Additional methods...
    var firstSubmenu = myMenu.submenus[0];
    myMenu.expandMenu(firstSubmenu);      // Expand a submenu
    myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
    myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded
    
    myMenu.expandAll();                   // Expand all submenus
    myMenu.collapseAll();                 // Collapse all submenus

  5. #5
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I used the doctype and still the menu jumps. If I take out the link within the menu:

    Code:
        <div style="float: left" id="my_menu" class="sdmenu">
          <div>
            <span>Online Tools</span>
              <p class="regular">Welcome to our site. Hope you enjoy the links below!</p>
          </div>
    </div>
    The menu just does not work. It only will work if I put a link under the text. If I make a menu with nothing but links, it works perfectly.

    I just don't know where to look for the problem. I've tried several difference browsers and still, no luck.

    Try going to the test site: http://www.alloutassault.net/alpha/
    Under Calendar is the text example.

  6. #6
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi all,

    im using SDmenu too.

    And i also wanted to place some Text instead of Links in the Menu (a Login menu ect.).

    I've tried the <p> Tag, but it doesnt work.

    Anyone have an Idea, how to make this Work?

    best regards,
    Pred

    P.S: Sorry for my Bad English, im from Germany

  7. #7
    Join Date
    Apr 2007
    Location
    Australia
    Posts
    76
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    You might like to try the modified version of SDMenu.... SDNMenu. See the links in my signature. The simple example shows non-link text.
    Cheers

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
  •