Forums

squinny

hello, is it possible to have a vertical list with each list item being a image or a button? like an aspbutton? basically what i am trying to do is have:
(image) (image)
(image)

squinny

basically what i am trying to do is have:
(image) when hovered over this image, an essentially submenu of lets say 3 more buttons appear to the right, which will be aspbuttons to link to another page?

(image) when hovered over this image, an essentially submenu of lets say 3 more buttons appear to the right, which will be aspbuttons to link to another page?

(image)

TravisJohnston

Sure, using CSS you could apply background images, or background color with a border, etc.

Just create your list with your links, set up some classes to work with so its easier, then style it accordingly. The only thing that will need to be outside of CSS is the hover over and the submenu.

You would create your vertical list, then add in another UL where the submenu should be, give it a class so you can target it, set it to Display:None; in your CSS to start so it doesn't show right away. Then in javascript, you would create a function to change the CSS to Display:Block; when a user hovers over a parent list item.

cyneWATCH

I would do this:

<ul>
	 <li><img src="img1.png" alt="">
	 	 <ul class="nested">
	 	 	 <li><a href="#">Button</a></li>
	 	 	 <li><a href="#">Button</a></li>
	 	 	 <li><a href="#">Button</a></li>
	 	 </ul>
	 </li>
	 <li><img src="img2.png" alt="">
	 	 <ul class="nested">
	 	 	 <li><a href="#">Button</a></li>
	 	 	 <li><a href="#">Button</a></li>
	 	 	 <li><a href="#">Button</a></li>
	 	 </ul>
	 </li>
	 <li>Button </li>
</ul>

CSS:


.nested {
	 display: none;
}
li:hover > .nested {
	 display: block;
}

And just add extra styling.

treehouse : what would you like to learn today?

Forums

vertical nav bar with images as a list item?