Wayfinder dropdown menu

128 Posts

evegate94 Reply #1, 11 years, 2 months ago

I've created my wayfinder menu and styled using css but the hover for the dropdown doesn't work, it places it to the side as a permanent option. I'm sure it's probably just some code I'm missing but can't figure it out. If I place as just html it works fine so don't think it's the css.

Here's my code:

[[Wayfinder? &startId=`0` &innerTpl=`WayfinderInnerRowTpl`]]

WayfinderInnerRowTpl:

<li class='has-sub'><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

And my css:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
	height: 49px;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	background: #141414;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
	background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
	background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
	background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #00CC00;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #00CC00;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #009900;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #009900 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #009900));
  background: -webkit-linear-gradient(top, #26262c 0%, #009900 100%);
  background: -o-linear-gradient(top, #26262c 0%, #009900 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #009900 100%);
  background: linear-gradient(to bottom, #26262c 0%, #009900 100%);

}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #00CC00;
  border-bottom: 1px dotted #00FF00;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #009900;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #009900;
  border-bottom: 1px dotted #00FF00;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #006600;
}

128 Posts

evegate94 Reply #2, 11 years, 2 months ago

It also places an extra blank <a></a> tag in before the sub menu as well which I can't work out where that comes from either

215 Posts

designcouch Reply #3, 11 years, 2 months ago

evegate94 - I don't think your CSS is quite complete. Wayfinder uses a nested unordered list for menus (see example below). You do not accomodate anywhere in your CSS for the second level (the dropdown) of this list—instead you're using a class to denote if a menu contains a submenu. This is not only an extra (un-necessary) step, but very un-semantic.

Wayfinder Example Menu

<div id="cssmenu">
   <ul>
      <li><a href="#">Link 1</a>
         <ul>  <!-- Your Dropdown Menu -->
            <li><a href="#">Link 5</a></li>
         </ul>
      </li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
   </ul>
</div>

To hide and show the second level of this menu, simply use the following CSS:

/* Hide submenu by default */
#cssmenu > ul > li > ul {
   max-height:0;
   overflow:hidden;
}

/* Show submenu upon hovering over its parent */
#cssmenu > ul > li:hover > ul {
   max-height:2000px;
}

You can also use display:hidden and display:block instead of the max-height property, but I don't like to do that because it makes the menu less accessible to search engines. You can also style your dropdown using this same method.

Also of note: the blank anchor is most likely coming from your parent resource.

Jesse Couch
MODX Aficionado, Front-End Designer & Developer
http://www.designcouch.com

128 Posts

evegate94 Reply #4, 11 years, 2 months ago

Thanks for that, great help! Although how do I get the dropdown to take the style of the class has-sub?
I've removed WayfinderInnerRowTpl to get the dropdown to work but it's not styling as the has-sub class I assume because I've not said anywhere to use this class. I've tried adding the styles to the css you added above but this didn't work. Do I have to rename my has-sub classes?

215 Posts

designcouch Reply #5, 11 years, 2 months ago

Quote from: evegate94 at Mar 13, 2013, 04:19 PM

Thanks for that, great help! Although how do I get the dropdown to take the style of the class has-sub?
I've removed WayfinderInnerRowTpl to get the dropdown to work but it's not styling as the has-sub class I assume because I've not said anywhere to use this class. I've tried adding the styles to the css you added above but this didn't work. Do I have to rename my has-sub classes?

My pleasure! Always glad to help. About your "has-sub" class: it's completely unnecessary. Instead of forcing a class for any list item that has a child ul, you simply use this selector:

#cssmenu > ul > li > ul {}

If you do this, you don't even need the "has-sub" class, as it directly selects any unordered list that is the direct descendent of a top level list item.

Jesse Couch
MODX Aficionado, Front-End Designer & Developer
http://www.designcouch.com

128 Posts

evegate94 Reply #6, 11 years, 2 months ago

Great help! I've finally got it working just as I want and lost a lot of unnecessary code! Thanks

128 Posts

evegate94 Reply #7, 11 years, 2 months ago

I know not technically a modx question but designcouch you seem to know what you're talking about, how would I centre an image within my div. This is the code I'm currently using but it doesn't seem to work

.sliderGallery img {
	width: 100%;
	overflow: hidden;
	display: block;
    margin-left: auto;
    margin-right: auto;
	text-align:center;
}

215 Posts

designcouch Reply #8, 11 years, 2 months ago

Glad I could help. As to your image css, that should mostly work. I do, however, have some questions. First off, it would be highly helpful to see the markup that you're styling with this CSS; knowing the structure is essential to understanding why your CSS isn't working. I am also curious about centering your image when you've already set the width of the image to 100%. It seems un-necessary.

Also, it appears that you're applying styles intended for the parent ( .sliderGallery ) to the child ( .sliderGallery img ). An example would be text-align; there is no purpose at all for this in an image (unless you're trying to center the alt text) because an image will never contain text. Text-align can, however, be used as an IE hack to ensure centering of content within a div. Another odd parameter you're using is overflow:hidden; again, an image can't have content, so nothing can overflow it.

All that being said, here is some CSS and HTML that I know works.

HTML

<div class="sliderGallery">
     <img src="example.jpg" alt="example" title="Example Image"/>
</div>

CSS

.sliderGallery {
	width:960px;
	margin: 0 auto;
	background: green;
}
	
.sliderGallery img {
	display: block;
	margin: 0 auto;
        width:500px;
}

Should be noted that you can obviously alter the width of both the container and the image without affecting functionality of the CSS. [ed. note: designcouch last edited this post 11 years, 2 months ago.]

Jesse Couch
MODX Aficionado, Front-End Designer & Developer
http://www.designcouch.com

128 Posts

evegate94 Reply #9, 11 years, 2 months ago

I have a fixed height div box which has an image on load. Below is a gallery, when a gallery image is clicked it displays the image larger in the div box. But as images vary in height depending on what is uploaded I just needed to fit the width of the box but it's aligning this large image from the top so if most of the image is at the bottom it gets cropped out. I wanted to centre it so it crops better. If I didn't use the width 100% it just displayed the image at full size and didn't fit the box.

This is the code I'm using to display this larger image.

<div class="sliderGallery">
[[!GalleryItem?]]

[[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]"/></a>
</div>
`]]

This is the code calling the gallery

[[!Gallery? &album=`Gates` &toPlaceholder=`gallery` &thumbTpl=`NewGalleryThumb` &thumbWidth=`150`]]

[[+gallery]]

I've tried using the block and margin as I thought that was it but it doesn't work.

Here's the website as it is if that helps http://www.fencing4farmers.co.uk/stock.html

215 Posts

designcouch Reply #10, 11 years, 2 months ago

Ah. You mean vertical centering. That's a tricky beast, especially with variable height. Let me take a closer look and I'll post back here soon.

Jesse Couch
MODX Aficionado, Front-End Designer & Developer
http://www.designcouch.com