Multiple Columns on Menu

shaker12 · Aug 3, 2012

I would like to add some columns under my products link. For example,

Title Title Title Title
Vendor Vendor
Vendor Vendor
Vendor Vendor

Please let me know if someone could help me on this.

Thanks

Joe

HTML:

<section id="navigation">
                    <nav>
                        <ul id="topnav" class="sf-menu">
                            <li class="current"><a href="index.html">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">News</a></li>
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul><!-- topnav -->
                    </nav><!-- nav -->	
                    <div class="clear"></div>
                </section>
                <div class="clear"></div>
            </header>
        </div>

Code:

#navigation {
float:none; 
clear:both; 
background:url(../images/bg-navigation.png) repeat; 
}
nav{
position:relative;	
z-index:9000; 
float:none; 
margin:0 0 0 0;
}

#topnav{
	margin:0;
	padding:0;
	list-style-type:none;
	overflow:visible;
	position:relative;
	float:left;
	font-size:14px;
	font-family:'DroidSansRegular', Arial;
  }
.sf-menu a {
	text-decoration:none!important;
	display:		block;
	position:		relative;
	padding: 		0 25px !important;
	text-decoration:none;
	font-weight:normal;
	text-transform:uppercase;
	color:#ededed;
	text-shadow:1px 1px 0 #151515;

}
.sf-menu a:visited {
color:#ededed;
}
.sf-menu a:hover, .sf-menu li a.current {
color:#fff;
}
.sf-menu li.sfHover a:hover {
color:#ededed;
}

.sf-menu li a {
background:url(../images/bg-sepmenu.gif) repeat-y top right; line-height:42px;
}
.sf-menu li { 
padding:0 0;
}
.sf-menu li:hover,
.sf-menu .current, .sf-menu  .current:hover {
background:url(../images/bg-navcurrent.png) repeat;
}

/* Drop down menu */
.sf-menu ul a:hover {}
.sf-menu li li {
	text-align:left;
	line-height:20px;
	margin:0;
}
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	
}
.sf-menu {
	line-height:100%;
	position:absolute;
	right:0;
	bottom:0;
	float:left;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			14em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
	margin:0;
}

.sf-menu li li{ 
margin:0px 0px;
}


.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0px;
	top:			3.7em; /* match top ul list item height */
	z-index:		99;

}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			14em; /* match ul width */
	top:			-1px;
	margin-left:	0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
	
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			14em; /* match ul width */
	top:			-1px;
	
}
.sf-menu ul li a{
	padding:14px 25px!important;
	text-transform:capitalize;
	line-height:normal;
	display:block; width:auto; white-space:no-wrap;
}

.sf-menu ul li a:hover{}
.sf-menu li ul {
	padding:0px;
}
.sf-menu a.sf-with-ul {
	padding-right: 	0px;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			10px;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
}
.sf-menu li li a {
background:transparent; font-size:14px;
}
.sf-menu li li {
background:url(../images/submenu.png) repeat; border-bottom:solid 1px
}
.sf-menu li li:hover {
background:url(../images/submenu-hover.png) repeat;
}

chrishirst · Aug 3, 2012

http://www.cssplay.co.uk/menus/

PixelPusher · Aug 3, 2012

Simple enough. How many columns?

Also, you should look into other float clearing methods (i.e. clearfix). Using the empty div element after a floated item is not the best practice IMO. I prefer to use the :after pseudo class on the parent element to the floated items. Cleaner option.

Float clear class

Code:

.clearfix:after {
  content:'"";
  display:block;
  height:0;
  line-height:0;
  clear:both;
  visibility:hidden;
}

ronaldroe · Aug 3, 2012

PixelPusher said:
I prefer to use the :after pseudo class on the parent element to the floated items. Cleaner option.

*Initiates slow clap*
So many people doing the empty div thing. It's not semantic and bloats code. The :after pseudo element is so much better.

shaker12 · Aug 3, 2012

I would like to create about 4 to 5 columns under product with sub titles. Would I be able to put 2 or 3 in one column? We have alot of products.

shaker12 · Aug 4, 2012

Just curious if you have any ideas.

http://www.whitehouse.gov/ if you hover over issues this is somewhat what I would like other than the line under title and links below it.

I didn't want to use this page as example but this is the quickest one I could find. I want to use the same colors and boxes though I want to be able to list all of our product types on here to link to our main product pages. It will make it so I dont have to make another page.

Let me know your thoughts.

chrishirst · Aug 5, 2012

And have you looked at the source code of the document to see what does what?

It is simply a "flyout/dropdown menu

http://www.cssplay.co.uk/menus/pro-flyout-list.html

shaker12 · Aug 5, 2012

I dont see any place on the site where to dowload or view the source code. Do you mean to view with right click of mouse to view codes. I was holdin off alittle to see if pixel would come up with something from codes provided.

ronaldroe · Aug 6, 2012

Check this out: http://www.webdesignforum.com/15191-css-only-dropdown-menu.html

Then, in place of the nested lists, add divs with all of your content, be it multiple other lists, images, a jQuery slider even (holy crap, that idea could be useful...dibs!). Then just style everything as needed.

chrishirst · Aug 6, 2012

shaker12 said:
I dont see any place on the site where to dowload or view the source code. Do you mean to view with right click of mouse to view codes. I was holdin off alittle to see if pixel would come up with something from codes provided.

By viewing the source code of a document that already does what you want do DOES already provide you with working code.

Reverse engineering existing and working code is a good way of learning how things work. Being "spoon-fed" with code serves no real useful purpose, as all you have learned is how to ask. Studying other peoples code means you start to learn for yourself.

It is the "Give a man a fish" principle.

shaker12 · Aug 6, 2012

I would agree and thank you for your comments. I will try to figure this out on my own then. I agree this will help me learn how to do it and learn from the experience. Pixel's help would have helped me understand it too. Anyways, I will try to learn from your example. I don't believe it will matter this is a vertical menu vs. horizontal.

Thanks

ronaldroe · Aug 6, 2012

shaker12 said:
I don't believe it will matter this is a vertical menu vs. horizontal.

The only difference is how you'll style the menu. Everything else works the same.

shaker12 · Aug 8, 2012

Having a real hard time figuring this out from the examples. I will continue to look but if some could show me example off my current menu I would appreciate it and I will build it out from there. I will continue to try to figure out from your examples.

ronaldroe · Aug 8, 2012

For your HTML, it'll be something like so:

HTML:

<nav>
  <ul>
    <li><a href="#">Regular Item</a></li>
    <li>Dropdown Item
      <div>
        <ul>
         <li>Submenu Item</li>
         <li>Submenu Item</li>
         <li>Submenu Item</li>
        </ul>
        <ul>
         <li>Submenu Item</li>
         <li>Submenu Item</li>
         <li>Submenu Item</li>
        </ul>
        <div>A div with maybe some other stuff</div>
      </div>
    </li>
  </ul>
</nav>

The CSS that makes it work will be from what I posted before. The rest is styling and positioning, which you should be able to figure out.

TL;DR: Nest elements inside the <li> on your nav, add the styles I linked to and style as necessary.

shaker12 · Aug 9, 2012

I gave up on this menu. You gave me a simple drop down menu which I have already done. The additional column in the sub-menu is what I was looking for in the help. I appreciate everyone's time. Maybe after some experience, I can put this together.

Thanks again

Multiple Columns on Menu

shaker12

New Member

chrishirst

Well-Known Member

PixelPusher

Super Moderator

ronaldroe

Super Moderator

shaker12

New Member

shaker12

New Member

chrishirst

Well-Known Member

shaker12

New Member

ronaldroe

Super Moderator

chrishirst

Well-Known Member

shaker12

New Member

ronaldroe

Super Moderator

shaker12

New Member

ronaldroe

Super Moderator

shaker12

New Member