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

Wayfinder drop down css

    • 20500
    • 9 Posts
    mscofield Reply #1, 16 years, 1 month ago
    Hello there,

    I found this great chunks+css in a topic on this forum for making a drop down menu.
    Yet there is still (at least) one problem that I’m stuck with.
    The width of my submenu should be variable. So sometimes a few more pixels, depending on the submenu titles.

    You can see it on: www.michaelscofield.nl

    This is the (slightly modified) css code:
    @charset "UTF-8";
/* CSS Document */

.menu {
	font-family: "Trebuchet MS",Verdana,sans-serif;
	width: 860px;
	margin-top: 10px;
	position: relative;
	font-size: 12px;
	z-index: 95;
	height: 24px;
	background-color: #403A2D;
}

.menu ul li a, .menu ul li a:visited {
	text-decoration: none;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	overflow: hidden;
	text-align: right;
	margin: 0 2px 0 0;
	padding: 2px 6px;
 	background: #403A2D url(/assets/templates/yoursite/images/menu_bullet.gif) no-repeat 6px center;
	display: block;
	font-weight:normal;
	color: #fff;
}

.menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.menu ul li {
	float: left;
	margin-right: 1px;
	position: relative;
	margin-left: 0;
}

.menu ul li ul {
	display: none;
}

/* specific to non IE browsers */

.menu ul li:hover a {
	color: #fff;
	background-color:  #403A2D;
}

.menu ul li.last a {
	margin-right: 0;
}

.menu ul li:hover ul {
	background-color: #403A2D;
	display: block;
	position: absolute;
	top: 18px;
	left: 0;
	padding: 5px;
}

.menu ul li:hover ul li a.hide {
	background: #fff;
	color: #000;
}

.menu ul li:hover ul li:hover a.hide {
	background: #deecf7;
	color: #000;
}

.menu ul li:hover ul li ul {
	display: none;
}

.menu ul li:hover ul li a {
	display: block;
	background: #403A2D;
	color: #fff;
}

.menu ul li:hover ul li a:hover {
	color: #fff;
	font-weight:bold;
}

.menu ul li:hover ul li:hover ul {
	display: block;
	position: absolute;
	left: 95px;
	top: 0;
}

.menu ul li:hover ul li:hover ul.left {
	left: -95px;
}


    I try to understand these css parts, but It’s still kinda hard..

    Thanks in advance!

    edit: should be looking like this: http://www.lechantduverdier.nl/
      • 4310
      • 2,310 Posts
      bunk58 Reply #2, 16 years, 1 month ago
      Don’t think you can have the nested ul/li be variable width and wider than the parent.
      You can explicitly define the width for the nested li e.g.
      .menu ul li:hover ul li a {
	display: block;
	background: #403A2D;
	color: #fff;
        width:180px;
}

      Mind you I’m no CSS guru rolleyes
        • 20500
        • 9 Posts
        mscofield Reply #3, 16 years, 1 month ago
        Hm that sucks sad Because when i fix it at 180px, the contact submenu looks damn ugly..
        I want to get something close to this, btw: http://www.lechantduverdier.nl/

        Hope someone has the solution for me!
          • 4310
          • 2,310 Posts
          bunk58 Reply #4, 16 years, 1 month ago
          That one has different <ul> id’s with individual widths applied via the unique id in the CSS.
          It should be possible to do that using the parentRowTpl e.g.
           <li class="abc-[+wf.docid+]"><a href="[+wf.link+]"
title="[+wf.title+]">[+wf.linktext+]»</a>[+wf.wrapper+]</li>

          Then in the CSS have something like :
          #menu ul li#abc-XX ul { width: 165px; }
#menu ul li#abc-XX ul { width: 125px; }
#menu ul li#abc-XX ul { width: 145px; }

          Where XX is the doc id of the parent (top level item)
            • 20500
            • 9 Posts
            mscofield Reply #5, 16 years, 1 month ago
            Hm seems not to work for me. It keeps choosing the given width or, if not given a width, takes the sam width as the top menu buttons
              • 23299
              • 1,161 Posts
              Photowebmax Reply #6, 16 years, 1 month ago
              These menus always need some custom tweaking. You might have to experiment with changing the overall size of the <ul> (make it wider) and increase the padding on the main <li>’s. This will give your parent links some breathing room. What makes the sub hover links noticeable is the background color and the width of the text blocks itself. In your case the number of letters in the parent links are few but some of the of sub hover links have several words which then makes the shover sub link stick out. I also think you need to add some top padding to the hover block as well.

              The other thing to watch for is you need to test for web user text size increases: there needs to be some extra room in the menu for the increase in user text size to expand into.