We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 3022
    • 59 Posts
    Hi all,

    I am looking for a way to make DropMenu behave like this:
    - second level menu items are hidden unless their parent is active

    This behaviour is exactly the same as on www.modxcms.com. For example: on the home page, the main menu is Home - Blog - Features - etc. Only first level items. As soon as you select Development, the second level items under Development become visible.
    When you then click Support, the second level items under Development disappear and the second level items under Support appear.

    This is great!

    Does anyone know how to configure DropMenu so that it behaves the same? (DropMenu in my test site shows all second level items, making the menu too long.)

    Or does modxcms.com use a different Menu snippet?


    TIA!!


    Bee
      • 2762
      • 1,198 Posts
       /*MENU */
      
      #menu li {
      	list-style: none;
      	background-image: url(imgs/button-red.gif);
      	background-repeat: no-repeat;
      	background-position: 0 -1px;
      	padding-top: 2px;
      	padding-right: 0;
      	padding-bottom: 2px;
      	padding-left: 22px;
      	}
      
      #menu li li {
      	font-size: 1em;
      	background-image: url(imgs/button-yel.gif);
      	background-repeat: no-repeat;
      	background-position: 0 -3px;
      	padding-top: 2px;
      	padding-right: 0;
      	padding-bottom: 2px;
      	padding-left: 22px;
      	}
      	
      #menu li li.here {
      	font-size: 1em;
      	background-image: url(imgs/button-here.gif);
      	background-repeat: no-repeat;
      	background-position: 0 -3px;
      	padding-top: 2px;
      	padding-right: 0;
      	padding-bottom: 2px;
      	padding-left: 22px;
      	}
      	
      #menu li li li {
      	padding: 3px 0 2px 13px;
      	font-size: 1em;
      	background-image: url(imgs/button-yel.gif);
      	background-repeat: no-repeat;
      	background-position: 0 -3px;
      	}
      
      #menu ul {
      	padding: 10px;
      	margin: 5px;
      	}
      
      #menu ul ul {
      	display:none;
      	padding: 5px 10px 10px 0;
      }
      
      #menu li.here ul {
      	display:block;
      	padding: 3px 0 2px 13px;
      	font-size: 1em;
      	background-repeat: no-repeat;
      	background-position: 0 5px;
        }
        
      #menu ul ul ul {
      	padding: 0 !important;
      	margin: 0 0 -4px 0 !important;
      	}
      
      #menu a {
      	font-size: .9em;
      	text-decoration: none;
      	}
      
      #menu a:link {
      	color: #CC6600;
      	font-weight: normal;
      	}
      
      #menu a:visited {
      	color: #CC6600;
      	}
      
      #menu a:hover, #links a:active {
      	color: #9D9A95;
      	}
      


      This is css style of MODx Template Soft http://modxcms.com/forums/index.php/topic,2516.0.html

      You can download free to understand how it works
        Free MODx Graphic resources and Templates www.tattoocms.it
        -----------------------------------------------------

        MODx IT  www.modx.it
        -----------------------------------------------------

        bubuna.com - Web & Multimedia Design
        • 2762
        • 1,198 Posts
        The aswer is here:

        #menu ul ul {
        	display:none;
        	padding: 5px 10px 10px 0;
        }


        that hide submenu

        and here:
        #menu li.here ul {
        	display:block;
        	padding: 3px 0 2px 13px;
        	font-size: 1em;
        	background-repeat: no-repeat;
        	background-position: 0 5px;
          }
        


        That show submenu when you are in active (.here) link
          Free MODx Graphic resources and Templates www.tattoocms.it
          -----------------------------------------------------

          MODx IT  www.modx.it
          -----------------------------------------------------

          bubuna.com - Web & Multimedia Design
          • 3022
          • 59 Posts
          Banzai, awesome!

          ul.topnav ul {
            display: none;
            ...
          }
          
          ul.topnav li.here ul {
            display: block;
            ...
          }
          


          This does the trick.


          Thanks again!


          Bee

          P.S. Banzai, you were just a bit faster with your post... grin
            • 2762
            • 1,198 Posts
            Good Work Bee! wink
              Free MODx Graphic resources and Templates www.tattoocms.it
              -----------------------------------------------------

              MODx IT  www.modx.it
              -----------------------------------------------------

              bubuna.com - Web & Multimedia Design