locked
Vertical Menu with Vertical submenu RRS feed

  • Question

  • User-1793983404 posted

    Hi,

    Can I do a vertical menu and a vertical sub menu. I want to do something like this http://www.tdcanadatrust.com/student/index.jsp

    A menu whereby when the user click on it, it will show a static  submenu under it.

    I have done a menu with a staticdisplay levels of 2. Thats fine, But Can i hide/show the submenus ?? when the user clicks on menu item it will expand under it when the user click again it will collapse

    Tuesday, February 26, 2008 10:09 PM

Answers

  • User-2115483147 posted

    I have done a menu with a staticdisplay levels of 2. Thats fine, But Can i hide/show the submenus ?? when the user clicks on menu item it will expand under it when the user click again it will collapse

     

    Hi m_enayah,

    According to your requirement, I spend three hours to write a demo to you, see the whole code:

    HTML:

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <HEAD>
    <TITLE>Plant</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="menu.js"></script>
    </HEAD>
    <BODY>
    <ul id="TopMenu">
    	<li><a href="#">Fruit</a>
    		<ul>
    			<li><a href="#">Apple</a></li>
    			<li><a href="#">Orange</a></li>
    			<li><a href="#">Banana</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Vegetable</a>
    		<ul>
    			<li><a href="#">Cabbage</a></li>
    			<li><a href="#">Celery</a></li>
    			<li><a href="#">Cachet</a></li>
    		</ul>
    	</li>
    </ul>
    </BODY>
    </HTML>

    menu.js:

    <!--
    function menuFix() {
        var sfEls = document.getElementById("TopMenu").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onclick = function() {
                if(this.className.indexOf("sfhover") < 0)
                {
                    //Expend this
                    this.className+=(this.className.length>0? " ": "") + "sfhover";

                    //Close Others
                    var sfEls2 = document.getElementById("TopMenu").getElementsByTagName("li");
                    for (var i=0; i<sfEls2.length; i++) {
                        if(sfEls2[i].className.indexOf("sfhover") >= 0 && sfEls2[i] != this)
                        {
                            sfEls2[i].className=sfEls2[i].className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                        }
                    }
                }
                else
                {
                    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                }
            }
        }
    }
    window.onload=menuFix;
    //-->

    menu.css:

     

    <!--
    /* Html Tags Redefined */
    *{margin:0;padding:0;border:0;}
    Body{
    	padding: 0px;
    	margin: 0px;
    }
    
    /* Global */
    *{
    	font-size: 12px;
    	font-family: "Courier New", Courier, monospace;
    }
    
    /* Unique Id For Top Menu */
    #TopMenu {
    	width: 180px; line-height: 24px; list-style-type: none; margin: 0px; padding: 0px; background-color: #6CA7D3;
    }
    #TopMenu a {
    	display: block; width: 170px; padding-left: 10px;
    }
    #TopMenu a:link {
    	color:#FFF; text-decoration:none;
    }
    #TopMenu a:visited {
    	color:#FFF;text-decoration:none;
    }
    #TopMenu a:hover {
    	color:#FFF;text-decoration:none;
    }
    
    #TopMenu li {
    	width: 100%;
    }
    #TopMenu li a {
    	border-bottom: 1px solid #FFF;
    }
    #TopMenu li a:hover{
    	background:#2782BB;
    }
    #TopMenu li ul {
    	line-height: 27px; list-style-type: none;text-align:left; display: none; width: 180px; margin: 0px; padding: 0px;
    }
    #TopMenu li ul li{
    	width: 180px; background: #F6F6F6;
    }
    
    #TopMenu li ul a{
    	width: 156px;text-align:left;padding-left:24px;
    }
    #TopMenu li ul a:link {
    	color:#666; text-decoration:none;
    }
    #TopMenu li ul a:visited {
    	color:#666;text-decoration:none;
    }
    #TopMenu li ul a:hover {
    	color:#FFF;text-decoration:none; background:#2782BB;
    }
    
    #TopMenu li:hover ul {
    	display: block;
    }
    #TopMenu li.sfhover ul {
    	display: block;
    }
    //-->
    Let me know if I have misunderstood what you mean. Thanks.

    Hope it helps,

    Hong Gang  

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 29, 2008 12:36 AM

All replies

  • User-2115483147 posted

    I have done a menu with a staticdisplay levels of 2. Thats fine, But Can i hide/show the submenus ?? when the user clicks on menu item it will expand under it when the user click again it will collapse

     

    Hi m_enayah,

    According to your requirement, I spend three hours to write a demo to you, see the whole code:

    HTML:

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <HEAD>
    <TITLE>Plant</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="menu.js"></script>
    </HEAD>
    <BODY>
    <ul id="TopMenu">
    	<li><a href="#">Fruit</a>
    		<ul>
    			<li><a href="#">Apple</a></li>
    			<li><a href="#">Orange</a></li>
    			<li><a href="#">Banana</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Vegetable</a>
    		<ul>
    			<li><a href="#">Cabbage</a></li>
    			<li><a href="#">Celery</a></li>
    			<li><a href="#">Cachet</a></li>
    		</ul>
    	</li>
    </ul>
    </BODY>
    </HTML>

    menu.js:

    <!--
    function menuFix() {
        var sfEls = document.getElementById("TopMenu").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onclick = function() {
                if(this.className.indexOf("sfhover") < 0)
                {
                    //Expend this
                    this.className+=(this.className.length>0? " ": "") + "sfhover";

                    //Close Others
                    var sfEls2 = document.getElementById("TopMenu").getElementsByTagName("li");
                    for (var i=0; i<sfEls2.length; i++) {
                        if(sfEls2[i].className.indexOf("sfhover") >= 0 && sfEls2[i] != this)
                        {
                            sfEls2[i].className=sfEls2[i].className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                        }
                    }
                }
                else
                {
                    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                }
            }
        }
    }
    window.onload=menuFix;
    //-->

    menu.css:

     

    <!--
    /* Html Tags Redefined */
    *{margin:0;padding:0;border:0;}
    Body{
    	padding: 0px;
    	margin: 0px;
    }
    
    /* Global */
    *{
    	font-size: 12px;
    	font-family: "Courier New", Courier, monospace;
    }
    
    /* Unique Id For Top Menu */
    #TopMenu {
    	width: 180px; line-height: 24px; list-style-type: none; margin: 0px; padding: 0px; background-color: #6CA7D3;
    }
    #TopMenu a {
    	display: block; width: 170px; padding-left: 10px;
    }
    #TopMenu a:link {
    	color:#FFF; text-decoration:none;
    }
    #TopMenu a:visited {
    	color:#FFF;text-decoration:none;
    }
    #TopMenu a:hover {
    	color:#FFF;text-decoration:none;
    }
    
    #TopMenu li {
    	width: 100%;
    }
    #TopMenu li a {
    	border-bottom: 1px solid #FFF;
    }
    #TopMenu li a:hover{
    	background:#2782BB;
    }
    #TopMenu li ul {
    	line-height: 27px; list-style-type: none;text-align:left; display: none; width: 180px; margin: 0px; padding: 0px;
    }
    #TopMenu li ul li{
    	width: 180px; background: #F6F6F6;
    }
    
    #TopMenu li ul a{
    	width: 156px;text-align:left;padding-left:24px;
    }
    #TopMenu li ul a:link {
    	color:#666; text-decoration:none;
    }
    #TopMenu li ul a:visited {
    	color:#666;text-decoration:none;
    }
    #TopMenu li ul a:hover {
    	color:#FFF;text-decoration:none; background:#2782BB;
    }
    
    #TopMenu li:hover ul {
    	display: block;
    }
    #TopMenu li.sfhover ul {
    	display: block;
    }
    //-->
    Let me know if I have misunderstood what you mean. Thanks.

    Hope it helps,

    Hong Gang  

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 29, 2008 12:36 AM
  • User-623960977 posted

    Hi Hong-Gang Chen
    I like your menu so much i have emailed you to ask permission to use it

    Saturday, March 14, 2009 6:44 PM
  • User397099150 posted

    THANK YOU SO MUCH FOR WORKING THIS OUT!!!

    Currently it is set to expand when you hover over it. Is there a way to make the menu expand only when you click on it?




    Wednesday, October 14, 2009 5:00 PM
  • User-732569861 posted

    This code does not work when used on master page.

    when any of link on sub menu post back it losses its state.

    Monday, February 8, 2010 6:20 PM
  • User-2115483147 posted

    This code does not work when used on master page.

    when any of link on sub menu post back it losses its state.

     

    So, please refer this thread and check my replied,

    http://forums.asp.net/p/1376439/2895745.aspx

     

    Monday, February 8, 2010 9:02 PM