We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Mini tab menu-Help!

    • 20041
    • 83 Posts
    modxusr Reply #1, 17 years, 10 months ago
    Has anyone done a mini tabs(with shapes) menu (originally done by simplebits)
    http://www.simplebits.com/notebook/2003/08/14/minitab_shapes.html

    Can I use any existing (menu)snippet? Please tell me how to do this.

    Thanks
    • sottwell Reply #2, 17 years, 10 months ago
      this is done in the "Greenery" and the "Valentine" templates. DropMenu works just fine.

      http://www.oswd.org/design/preview/id/2448

      http://www.alandaniel.co.uk/valentine.html

      The snippet call:
       <div id="menu">[!DropMenu?startDoc=`0`&levelLimit=`1`!]</div>

      The CSS:
      #menu {
  width: 767px;
  margin: 0 auto;
  text-align: left;  
}

#menu ul {
  margin: 0;
  padding: 0;
  line-height: normal;  
}

#menu ul li {
  width: 10em;
  display: inline;
  float: left;
  padding-top: 0.8em;  
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  color:#720c21;
}
#menu ul li.here{
  background: url(../images/menu_tab.jpg) no-repeat bottom center;
}
#menu ul li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 1.0em;
  color: #720c21;
}

#menu ul li a:hover,
#menu ul li a.active {
  background: url(../images/menu_tab.jpg) no-repeat bottom center;
}
        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
        • 20041
        • 83 Posts
        modxusr Reply #3, 17 years, 10 months ago
        Thanks a lot, Susan.
          • 20041
          • 83 Posts
          modxusr Reply #4, 17 years, 10 months ago
          I managed to get the menu running..but have some problems.
          How do I get the active page item also on the same line as the others. It appears slightly above the others. The list(menu) is working fine on a sample xhtml/css page outside MODx.
          For ex: On Home page Home item appears centered above the list of items, other items appear almost ok.
          Here is my CSS, just in case:
          #topnavwrapper {/*div wrapping the menu*/
	margin: 0 auto;
	text-align: center;
	 background: #333 url(topnavbg.gif) repeat-x;
	 width: 770px;
	 height: 35px;

}
/*menu code*/
#menu {
	  padding: 2px 0 0 40px;
	  height: 35px;
}
#menu ul {
	height: 35px;
  text-transform: uppercase;
	}

#menu ul li, #menu ul li a {
	display: inline;
	list-style-type: none;
	}

#menu ul li a:link, #menu ul li a:visited {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
 	line-height: 14px;
	letter-spacing: .04em;
	padding: 0 12px 6px 12px;
	text-decoration: none;
	color: #f66;
	}

#menu ul li.here, #menu ul li a:link.active, #menu ul li a:visited.active, #menu ul li a:hover {
	color: #CC3333;
	background: url(../pv/images/pointer.gif) no-repeat bottom center;
	}


          The snippet is called using:
          <div id="menu">[!DropMenu?startDoc=`0`&levelLimit=`1`!]</div>

          Waiting for help from you wizards.
          Thanks.
            • 20041
            • 83 Posts
            modxusr Reply #5, 17 years, 10 months ago
            grinGot it right by slightly modifying the CSS suggested by Susan. Thanks all.
            • sottwell Reply #6, 17 years, 10 months ago
              That’s the beauty of a simple nested unordered list for a menu. You can do just about anything you want in the CSS. Although sometimes you need to hack the generating script a bit to get all the containers and tags and classnames and what-have-you for more complex styling.
                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