We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 14404
    • 84 Posts
    Hello guys,

    I was looking for a way to get a 3 level dropmenu in the MODXHOST template.
    After testing alot (cus i dont have that much experience kiss) i was able to get it to work

    I changed some width’s because of my template so u probably need to play with it if ur
    gonna use it..

    Wayfinder call in template:
    [[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`cssplay_revParentRow` &cssTpl=`cssplay_ultdrop`]]

    Chunks:

    cssplay_revParentRow
    <li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    
    [+wf.wrapper+]
    
    </td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    
    </li>
    


    cssplay_ultdrop
    <link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/ultimate_drop.css" />
    


    CSS
    ultimate_drop.css
     /* common styling */
     #myajaxmenu {
    	position: absolute;
    	top:1px;
    	left: 0px;
    	display: block;
    	z-index: 1000;
    }
    #ajaxmenu {
    font-family: verdana, sans-serif; 
    width:984px; 
    position:relative; 
    font-size:0.8em;
    }
    #ajaxmenu ul {
    padding:0; 
    margin:0;
    list-style: none;
    }
    #ajaxmenu ul li {
    float:left;
    position:relative;
    width:123px;
    display:block;
    text-decoration:none;
    text-align:center;
    font-weight:normal;
    }
    #ajaxmenu ul li a, #ajaxmenu ul li a:visited {
    display:block; 
    text-decoration:none; 
    text-align:center;
    color:#062E4B; 
    width:123px; 
    height:28px;  
    	background-image: url(images/menu.png);
    	background-repeat: no-repeat;
    	background-position: -123px;
    padding-left:0px; 
    padding-right:0px;
    line-height:28px;
    margin:0px;
    font-weight:bold;
    }
    
    
    * html #ajaxmenu ul li a, #ajaxmenu ul li a:visited {
    width:123px;
    w\idth:123px;
    }
    #ajaxmenu ul li ul {
    	display:none;
    	position: absolute;
    	left: 0; /* Set 1px less than menu width */
    	top:8px;
    	line-height: 8px;
    }
    
    table {
    margin:-1px; 
    border-collapse:collapse;
    font-size:1em;
    width:172px;
    text-indent: 11pt;
    padding-top:2px;
    padding-bottom:2px;
    }
    
    /* specific to non IE browsers */
    #ajaxmenu ul li:hover a,
    #ajaxmenu ul li a:hover {
    color:#000; 
    	background-image: url(images/menu_roll.png);
    	height:28px;
    }
    
    #ajaxmenu ul li:hover ul,
    #ajaxmenu ul li a:hover ul {
    display:block; 
    position:absolute; 
    top:27px;
    left:0; 
    width:123px;
    }
    * html #ajaxmenu ul li a:hover ul {
    margin-top:0;
    marg\in-top:1px;
    }
    
    #ajaxmenu ul li:hover ul li ul,
    #ajaxmenu ul li a:hover ul li a ul {
    visibility:hidden; 
    position:absolute; 
    height:0; 
    width:0;
    }
    
    #ajaxmenu ul li:hover ul li a,
    #ajaxmenu ul li a:hover ul li a {
    	color:#ffffff;
    	background-image: url(images/bullet_11x8.gif) !important;
    	background-repeat: no-repeat !important;
    	text-align: left;
    	border-right: 1px solid #2f2f2f;
    	border-bottom: 1px solid #2f2f2f;
    	border-left: 1px solid #2f2f2f;
    	font-weight: normal;
    	width: 123px;
    	background-color: #000000;
    	background-position: left;
    	height:18px;
    	padding-top:-8px;
    	padding-bottom:9px;
    }
    
    * html #ajaxmenu ul li a:hover ul li a {
    width:800px;
    }
    
    #ajaxmenu ul li:hover ul li a.drop,
    #ajaxmenu ul li a:hover ul li a.drop {
    background:#fffff;
    }
    
    #ajaxmenu ul li:hover ul li a:hover,
    #ajaxmenu ul li a:hover ul li a:hover {
    	background-image: url(images/bullet_11x8_roll.gif)  !important;
    	color: #fff;
    	background-repeat: no-repeat;
    	background-color: #53beff;
    	background-position: left center;
    	text-indent: 11pt;
    }
    
    #ajaxmenu ul li:hover ul li:hover ul,
    #ajaxmenu ul li a:hover ul li a:hover ul {
    visibility:visible; 
    position:absolute; 
    left:123px; 
    top:0;
    width:123px;
    }
    
    #ajaxmenu ul li:hover ul li:hover ul.left,
    #ajaxmenu ul li a:hover ul li a:hover ul.left {
    left:-100px;
    }
    
    * html ul li a {height:1%}

      • 33208
      • 21 Posts
      Excellent just what I was looking for.

      Many Thanks

      Yoshima

      grin
        • 23299
        • 1,161 Posts
        Is there a live URL to see this in action?
          • 33208
          • 21 Posts
          Photowebmax,

          in dev at the moment I will repy with the url when live!!

          Yosh grin