HTML Sub Menu with CSS

Hi Experts,

Just a quick one really...

I'm working on a shopping website and trying to create a sub menu for T-shirts. I've added a sub menu in i.e. men's t-shirts etc. How it should work is that when you hover over t-shirts, then it will open or display a sub menu preferably to the right. Please see attached screen shot of what it should look like and how it should work.

I have attached a screen shot for the current sub menu how it looks now so when you hover over T-shirt it should display a sub menu to the right as in the image "sub-menu.png". I have also attached images for white background.

Just need a little help with the code in particular the css. Speedy response is very much appreciated. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sub menu</title>
<style type="text/css">
.lmenu-content {
width:226px;
background:#f6f6f6;
border:1px solid #0268e5;
border-top:none;
float:left;
margin:0 0 10px 0;
padding:0 0 5px 0;

-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

.lmenu-content ul li {
padding:10px 0px 5px;
margin:0 1px;
border-bottom:1px solid #e6e6e6;
}

.lmenu-content ul li a {
font-weight:700;
font-size:12px;
padding:0 0 0 9px;
background:url(../images/left-menu-arrow.png) no-repeat right center;
display:block;
margin:0 9px 0 0;
}

</style>
</head>

<body>

<div class="lmenu-head">
            <h2>Categories</h2>
            </div>
            <div class="lmenu-content">
            <ul class="catlist">
                  <li><a href="">T-shirts</a></li>
            <ul>
                  <li>mens tshirts</li>
                <li>ladies tshirts</li>
                <li>all tshirts</li>
            </ul>
                  <li><a href="">Sweats</a></li>
                  <li><a href="">Assessories</a></li>
            <li class="last-l-c"><a href="">Full Catalog</a></li>            
            </ul>
</div>

</body>
</html> Sub Menu Left Border Product Menu background Current Sub menu
motolanix1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mrRanyCommented:
Hope this article can help.
Anyway you are free to choose whatever you prefer from this list.
0
alrosmarzCommented:
try with this

www.dynamicdrive.com 

there is a lot of examples there
0
motolanix1Author Commented:
Thanks guys for your help however i am just looking for when a user hovers over T-shirt then it opens a sub menu towards the right so a horizontal sub menu. Can anyone help with the CSS???
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mrRanyCommented:
You must read our articles to understand..
It won't work like a plug-in.

Try to read in my one from "Making it work".
0
motolanix1Author Commented:
It works with a previous css code so I know that my css is wrong
0
SSupremeCommented:
Try this layout:
<ul class="catlist">
                  <li><a href="">T-shirts</a>
            <ul>
                  <li>mens tshirts</li>
                <li>ladies tshirts</li>
                <li>all tshirts</li>
            </ul></li>
                  <li><a href="">Sweats</a></li>
                  <li><a href="">Assessories</a></li>
            <li class="last-l-c"><a href="">Full Catalog</a></li>            
            </ul>

Open in new window

al
0
mrRanyCommented:
Before you had no a submenu as I understand so I can believe.
However, submenu needs a little more..
0
motolanix1Author Commented:
Yes the html now is fine. Now the css below should display the sub menu list items only when a user hovers over the word "T-Shirt". If the user does not hover over the word T-Shirt then the list items in the sub menu will not be displayed.

.catlist li:hover ul.sub li{
                     display: block;
      position: relative;
      float: left;
      width: 250px;
      font-weight: normal;
      background: url(../images/productmenu-section-bg.png) no-repeat right bottom;
                     /*background-color: #FFF;*/
      padding: 10px 0 10px 20px;
}

The image is a white background but doesnt necessarily have to be an image. It could simply just be a white background color.
0
SSupremeCommented:
Yes it should work fine now, are there any other issues?
0
motolanix1Author Commented:
Yes the CSS doesnt work. When I click on T-shirts it should display a sub menu as per above screen shot ("sub-menu.png").

So HTML looks ok but the css needs a little tweek I believe for it to work.
0
mrRanyCommented:
Event on click or mouse over?
0
SSupremeCommented:
no javascript, mrRany.
0
motolanix1Author Commented:
Mouse over
0
motolanix1Author Commented:
Mouse over and css
0
motolanix1Author Commented:
Can anyone help on this?
0
SSupremeCommented:
provide a link please.
0
motolanix1Author Commented:
Which link do you require?
0
judsonmusicCommented:
I would use jquery it would make this all so much easier. If you are wiling to do that, I can provide examples like my menu at www.primarypc.com
0
motolanix1Author Commented:
I would like a vertical sliding sub-menu. My code above (HTML) is fine. I just need a tweak to the CSS so the menu slides out to the right.

Similar to the first one in http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
0
judsonmusicCommented:
If you want it to slide, I woud just add the jquery.animate. Please go to www.mo2salon.com and click about us. I use this same effect. Its very easy to implement and you can make it universal.
0
judsonmusicCommented:
also jquery .show('blind') would make these menus look really nice. I am willing to provide code for you if needed.
0
motolanix1Author Commented:
Yes sure that would be ok. However with the existing code I have provide above i.e. the html would you be able to use it and modify accordingly?

Thanks.
0
motolanix1Author Commented:
My current menu is current-sub-menu.png so it could look something similar to sub-menu.png?????
0
judsonmusicCommented:
iM going to build an example for you real quick.... 10 minutes...
0
motolanix1Author Commented:
Ok sure...
0
SSupremeCommented:
Which link do you require?
The thing is that this isn't a freelancer.com, this is experts exchange, and we are happy to guide you in your projects. I don't think judsonmusic meant to produce code for your website, so you copy and paste, sometimes it's possible if it's easy and not time consuming, link to your project could save our time. Therefore if you could provide a link, not a portfolio of docs, it would be easier for us to help and assist you. Most experts don't want stack on one question. As you can see now I don't require any links.
I guess your question was:
Just need a little help with the code in particular the css
I answered that it might not work because of change in menu layout.
0
SSupremeCommented:
Yes, he didn't.
0
judsonmusicCommented:
IM working on it almost done. :) I will explain my code as well to help others.
0
motolanix1Author Commented:
HI,

I get your point. Possibly the menu layout may be the issue however I think the problem is somewhat with the CSS which I don't believe would be too time consuming hence why I posted the question.

I have provide a link which is http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php which would be similar to Drop-Down Menus, Horizontal Style // ALA.

I would just need help with the css really to get it so that when you hover over link the sub menu appears. I just wanted it simple hence why I just used HTML and CSS as apposed to JQuery or JavaScript
0
motolanix1Author Commented:
Ok no probs Judsonmusic .....;-)

Again, appreciate your comments Supreme ;-)
0
judsonmusicCommented:
ok here is the page, you can view source but I am going to also post code with explaination. AGAIN! There is not standard way and no wrong answer. This is my way and its easy to implement and also understand. Code post to follow..

http://www.servicemysite.com/examples/jquery_hnav.html

I only tested in FF because im on my mac

0
motolanix1Author Commented:
Ok thats great!

This is more along the lines of what i'm looking for.

I can modify the css to get it to suit the design of the rest of the page.

Thanks again.
0
judsonmusicCommented:
CODE EXPLAINATION:

I have included the jquery library (ui and min.js) which is needed to do any jquery period. I am using CDN(linking to google) instead of downloading a library as it lightens the load on your site. hence the site will load faster.)

for each menu item I did this:

I added my own attribute called "sub" and gave it the selector value that jquery would need to know which sub menu to pull up. in this case I used #subMenu1 as that is the id of the corresponding sub menu, I also in my css positioned each .menu relative and each submenu to hang out to the right 180px. all of this can be changed to what you want.

<div id="menu1" class="menu" sub="#subMenu1"> Main Item 1
    <div id="subMenu1" class="subMenu">
      <ul>
        <li>&nbsp;sub1 item 1</li>
        <li>&nbsp;sub1 item 2</li>
        <li>&nbsp;sub1 item 3</li>
        <li>&nbsp;sub1 item 4</li>
      </ul>
    </div>
  </div>

////////////THE JQUERY////////////////


in the jquery I simply say on anything with the class .menu, on mouseenter, hide all the menus, then show the one with the attribute that we made. And thats it! I also included a mouseleave function to remove menus.  I wrote all of this in 10 minutes so it could possible be cleaned up to include some other tweaks but this is the basic way I like to do these menus.
<script>
$(document).ready(function(){
      
      $('.menu').mouseenter(function(){
            
            //first hide other submenus
            $('.subMenu').hide();
            //set selector of the submenu we want to show.
            var oneToShow = $(this).attr('sub');                  
            //show the submenu
            $(oneToShow).show('blind');
            
            
      });
      
      $('.subMenu').mouseleave(function(){
            
            //first hide other submenus
            $('.subMenu').hide();
            
            
      });
      
      
});
</script>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery example nav menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
	
	$('.menu').mouseenter(function(){
		
		//first hide other submenus
		$('.subMenu').hide();
		//set selector of the submenu we want to show.
		var oneToShow = $(this).attr('sub');			
		//show the submenu
		$(oneToShow).show('blind');
		
		
	});
	
	$('.subMenu').mouseleave(function(){
		
		//first hide other submenus
		$('.subMenu').hide();
		
		
	});
	
	
});
</script>
<style>
#mainMenu {
	width:200px;
	border:1px solid #369;
}
li {
	list-style:none;
	cursor:pointer;
}
.subMenu {
	display:none;
	position:absolute;
	left:180px;
	top:0px;
	width:200px;
	height:auto;
	background-color:#FFFF99;
	border:1px solid #f00
}
.menu {
	position:relative;
	border-bottom:1px solid #ccc
}
</style>
</head>

<body>
<div id="mainMenu"> 
  <!--menu 1-->
  <div id="menu1" class="menu" sub="#subMenu1"> Main Item 1
    <div id="subMenu1" class="subMenu">
      <ul>
        <li>&nbsp;sub1 item 1</li>
        <li>&nbsp;sub1 item 2</li>
        <li>&nbsp;sub1 item 3</li>
        <li>&nbsp;sub1 item 4</li>
      </ul>
    </div>
  </div>
  <!--menu 2-->
  <div id="menu2" class="menu" sub="#subMenu2"> Main Item 2
    <div id="subMenu2" class="subMenu">
      <ul>
        <li>&nbsp;sub2 item 1</li>
        <li>&nbsp;sub2 item 2</li>
        <li>&nbsp;sub2 item 3</li>
        <li>&nbsp;sub2 item 4</li>
      </ul>
    </div>
  </div>
  <!--menu 3-->
  <div id="menu3" class="menu" sub="#subMenu3"> Main Item 3
    <div id="subMenu3" class="subMenu" >
      <ul>
        <li>&nbsp;sub3 item 1</li>
        <li>&nbsp;sub3 item 2</li>
        <li>&nbsp;sub3 item 3</li>
        <li>&nbsp;sub3 item 4</li>
      </ul>
    </div>
  </div>
  <!--menu 4-->
  <div id="menu4" class="menu" sub="#subMenu4"> Main Item 4
    <div id="subMenu4" class="subMenu">
      <ul>
        <li>&nbsp;sub4 item 1</li>
        <li>&nbsp;sub4 item 2</li>
        <li>&nbsp;sub4 item 3</li>
        <li>&nbsp;sub4 item 4</li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
judsonmusicCommented:
I highly recommend you see this documentation:

http://jqueryui.com/docs/show/

You can alter the effect that the menu has just by changing blind to something else. like slide, etc.

Take care.

Judson
0
judsonmusicCommented:
So is my solution acceptable?
0
motolanix1Author Commented:
Thanks,

Just what I'm looking for. I can as you said modify CSS and or effect of menu.

The code seems easy to understand however I will read the jquery documentation to better understand code.

Thanks again.
0
judsonmusicCommented:
Sound good. If you would please accept my posted code solution to if people search, they will be able to see that as the solution. If you feel that was the answer of course.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.