We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2376
    • 21 Posts
    I am working on a menu system I want to have my level 1 navigation horizontally across the top of the page.

    I can do this fine with CSS

    I want the sublevel navigation to appear on each page, so when I go to the products page, the child documents show up in another horizontal menu below my first menu. I can also style these by CSS. attached is a quick screen grab.

    How do I get these to show up?
    How do I only get the appropriate children to show up on the appropriate page?



    This is my first ModX Site.

    Thanks in advance.
    • Use DropMenu to generate your menus then use the here selector to set your display property.
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 2376
        • 21 Posts
        can you walk me through how to use it?

        sorry for being dumb...
        • There’s a ton of discussion on the forums about how to use the DropMenu snippet, so it’d probably behoove you to do a quick search first as there’s so many ways to go with this. Also, it’s fairly well documented in the snippet code header comments. Take a peek there first and come back with any specific questions and I’m sure you’ll get your answers fast.
            Ryan Thrash, MODX Co-Founder
            Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
            • 7455
            • 2,204 Posts
            you could use drop menu for the first or listglobal
            and for the secend dropmenuor listchildorsibs

            both are listed here: http://modxcms.com/repository.html
              follow me on twitter: @dimmy01
            • Simply style the li ul containers with display:none, then li.here ul display:inline or display:block. Use CSS to position them where you like.

              When making a second menu, such as the parent is horizontal and the child menu is vertical in a sidebar, I use a second DropMenu call, using the GetParent snippet as its startDoc. Of course, this will only work in a 2-level menu. There is a GetUltimateParent snippet that will return the id of the hightest parent below 0, which will work nicely as long as your first-level menu is using 0 for its startDoc.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 2376
                • 21 Posts
                wow the get ultimate parent worked.

                Now how do I style-ize the submenus? when I look at the code, they have the same class, topnav.
                Do I go into the template and wrap a div around the submenu?

                Thanks, in advance..
                • topnav li is for the top level, then use topnav li ul to get at the second level (the ul inside the li tag) and take it from there. The snippet does have an argument to let you encase everything in divs, I’ve never found the need to do that. Look over the list of arguments in the beginning of the snippet. Lots of options there.
                    Studying MODX in the desert - http://sottwell.com
                    Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                    Join the Slack Community - http://modx.org
                    • 2376
                    • 21 Posts
                    That doesnt seem to do anything.

                    here are my styles:
                    .topnav{
                    
                    margin:0 1px;
                    
                    color:#ffffff;
                    
                    }
                    
                    
                    
                    .topnav li{
                    
                    float:left;
                    
                    list-style-type:none;
                    
                    white-space:nowrap;
                    
                    }
                    
                    
                    
                    .topnav li a{
                    
                    display:block;
                    
                    padding:0 10px;
                    
                    font-size:0.8em;
                    
                    font-weight:normal;
                    
                    text-transform:uppercase;
                    
                    text-decoration:none;
                    
                    background-color:inherit;
                    
                    color: #ffffff;
                    
                    }
                    .topnav li ul a{
                    
                    display:none;
                    
                    padding:0 10px;
                    
                    font-size:0.8em;
                    
                    font-weight:normal;
                    
                    text-transform:uppercase;
                    
                    text-decoration:none;
                    
                    background-color: #ff0000;
                    
                    color: black;
                    
                    }
                    
                    
                    
                    * html #navigation a {width:1%;}
                    
                    
                    
                    .topnav li.here,.topnav a:hover{
                    
                    color: #000000;
                    
                    text-decoration: underline;
                    
                    }
                    
                    .topnav li.here { 
                    
                    padding:0 10px;
                    
                    text-transform:uppercase;
                    
                    font-size:0.8em;
                    
                    font-weight:normal;
                    
                    }
                    
                    .topnav li.here a, .topnav li.here a:hover{
                    
                    padding:0;
                    
                    font-size:1.0em;
                    
                    }
                    
                    
                    


                    and here is the output of the two menus:
                    	<!-- Navlinks -->	
                    <ul class="topnav">
                    <li><a href="index.php?id=1" title="">Home</a></li>
                    <li><a href="index.php?id=2" title="">About ISM</a>
                    <ul>
                    <li><a href="index.php?id=4" title="">Overview</a></li>
                    <li><a href="index.php?id=10" title="">Management Team</a></li>
                    
                    <li class="last"><a href="index.php?id=11" title="">Consulting Team</a></li>
                    </ul>
                    </li>
                    <li><a href="index.php?id=3" title="">Customers</a>
                    <ul>
                    <li><a href="index.php?id=12" title="">Customer Listing</a></li>
                    <li><a href="index.php?id=13" title="">Testimonials</a></li>
                    <li class="last"><a href="index.php?id=14" title="">Case Studies</a></li>
                    </ul>
                    </li>
                    <li><a href="index.php?id=5" title="Services">Our Services</a>
                    
                    <ul>
                    <li><a href="index.php?id=15" title="">Government</a></li>
                    <li class="last"><a href="index.php?id=16" title="">Commercial</a>
                    <ul>
                    <li><a href="index.php?id=17" title="">CRM Executive Briefing</a></li>
                    <li class="last"><a href="index.php?id=19" title="">Summary of Services</a></li>
                    </ul>
                    </li>
                    </ul>
                    </li>
                        <li class="here">Our Products
                    <ul>
                    
                    <li><a href="index.php?id=20" title="">CRM Automation</a></li>
                    <li><a href="index.php?id=21" title="">Top 15 Reviews</a></li>
                    <li><a href="index.php?id=22" title="">E-Guide to CRM Automation</a></li>
                    <li class="last"><a href="index.php?id=23" title="">CRM Reviews Online</a></li>
                    </ul>
                    </li>
                    <li><a href="index.php?id=8" title="">ISM News & Events</a></li>
                    <li><a href="index.php?id=9" title="">Contact Us</a>
                    <ul>
                    <li><a href="index.php?id=29" title="">Join ISM's Newsletter</a></li>
                    
                    <li class="last"><a href="index.php?id=30" title="">Employment at ISM</a></li>
                    </ul>
                    </li>
                    <li class="last"><a href="index.php?id=31" title="">Site Search</a></li>
                    </ul>
                    
                    	
                    	<!-- Navlinks -->	</td>
                    </tr>
                    
                    <tr>
                      <td bgcolor="#f6f6f3" valign="top" align="center"><ul class="topnav">
                    <li><a href="index.php?id=20" title="">CRM Automation</a></li>
                    
                    <li><a href="index.php?id=21" title="">Top 15 Reviews</a></li>
                    <li><a href="index.php?id=22" title="">E-Guide to CRM Automation</a></li>
                    <li class="last"><a href="index.php?id=23" title="">CRM Reviews Online</a></li>
                    </ul>
                    
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#f6f6f3" height="400" valign="top" align="center">
                    	<img src="assets/templates/ISM/images/homepage_temp.jpg" width="744" height="166" alt="" border="0">


                    What am I doing wrong?

                    Thanks.
                    • I would recommend that you work through a few css menu tutorials. This is an excellent one:

                      http://www.alistapart.com/articles/taminglists/

                      You can also get the css file for a given page if you use your browser and save it as complete html. Then you can examine the style to see how the effect was achieved.
                        Studying MODX in the desert - http://sottwell.com
                        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                        Join the Slack Community - http://modx.org