SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Superfish dropdown menu with 2 columns

    Hi, i have built a css dropdown menu with [B]Superfish v1.4.8 jQuery menu plugin.

    At the moment it only has a single column for the sub dropdown.
    (as seen at the following link) Superfish - Suckerfish on 'roids

    i want to have a 2 column 'mega dropdown' so that there are links on the left and right of the dropdown menu.

    Could someone tell me if this is possible within the superfish code andhow to do it

    thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can have anything you want in the dropdown. Inside a <li> you can place a div and have columns within that. You just need to set widths etc on each element appropriately.

    Perhaps show us your attempt at this, or an example of what you want to see (an image if you don't have a live example).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey ralph, thanks for the reply.

    see html/css below which i have coded for the dropdown

    i would like to have something like this Mega Dropdown Menu by Soh Tanaka with just 2 columns.

    Would it be a case of wrapping a div around the <li> and then creating a second div for the second column. howq would the css look.

    Im just unsure how to go about coding this.

    thanks again

    Code:
    <body>
    		<ul class="sf-menu">
    			<li class="current">
               
               <!--first button tab-->
                <li>
    				<a href="#">HOME</a>
    			</li>
                
                <!--END first button tab-->
                
                <!--SECOND button tab-->
                <li class="current">
    				<a href="#a">INBOUND MARKETING</a>
                  
    				<ul>
    					<li>
    						<a href="#aa">menu item that is quite long</a>
    					</li>
    					<li class="current">
    						<a href="#ab">MARKETING</a>
    						<ul>
    							<li class="current"><a href="#">menu item</a></li>
    							<li><a href="#aba">menu item</a></li>
    							<li><a href="#abb">menu item</a></li>
    							<li><a href="#abc">menu item</a></li>
    							<li><a href="#abd">menu item</a></li>
    						</ul>
    					</li>
                  
    					<li>
    						<a href="#">CTAS</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#">HUBSPOT</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<!--END SECOND button tab-->
                
                
                
                
                <!--THIRD button tab-->
    			<li>
    				<a href="#">MARKETING PACKAGES</a>
    				<ul>
    					<li>
    						<a href="#">menu item</a>
    						<ul>
    							<li><a href="#">short BUT SWEET</a></li>
    							<li><a href="#">short</a></li>
    							<li><a href="#">short</a></li>
    							<li><a href="#">short</a></li>
    							<li><a href="#">short</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#">menu item</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#">menu item</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#">menu item</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#">menu item</a>
    						<ul>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    							<li><a href="#">menu item</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">PROJECT SERVICES</a>
    			</li>	
                <li>
    				<a href="#">ABOUT US</a>
    			</li>
                <li>
    				<a href="#">CONTACT US</a>
    			</li>
    		</ul>
    	</body>
    Code:
    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    	margin:			0;
    	padding:		0;
    	list-style:		none;
    	font-family:Helvetica, Arial, sans-serif;
    }
    .sf-menu {
    	line-height:	1.0;
    	
    }
    .sf-menu ul {
    	position:		absolute;
    	top:			-999em;
    	width:			100%; /* 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;
    	
    }
    .sf-menu a {
    	display:		block;
    	position:		relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    	left:			auto;
    	top:			2.5em; /* match top ul list item height */
    	z-index:		99;
    	width:			160px; /* SETS THE WIDTH OF SUB MENU*/
    	
    }
    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:			100%; /* match ul width */
    	top:			0;
    	width:			100%; /* SETS THE WIDTH OF SUB SUB MENU*/
    }
    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:			10em; /* match ul width */
    	top:			0;
    }
    
    /*** DEMO SKIN ***/
    .sf-menu {
    	float:			left;
    	margin-bottom:	1em;
    	font-size:11px;
    	
    	
    	
    }
    .sf-menu a {
    	border-left:	1px solid #fff;
    	border-top:		1px solid #fff;
    	padding: 		.75em 1em;
    	text-decoration:none;
    	
    }
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color:			#fff;
    }
    .sf-menu li {
    background-image:url(../images/MENU_BACKGROUND.jpg);
    }
    .sf-menu li li {
    	background:		#282828;
    }
    .sf-menu li li li {
    	background:		#282828;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    	background:		#494949;
    	outline:		0;
    	color:#FFF;
    }
    
    /*** arrows **/
    .sf-menu a.sf-with-ul {
    	padding-right: 	2.25em;
    	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
    	position:		absolute;
    	display:		block;
    	right:			.75em;
    	top:			1.05em; /* IE6 only */
    	width:			10px;
    	height:			10px;
    	text-indent: 	-999em;
    	overflow:		hidden;
    	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    }
    a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    	top:			.8em;
    	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    	
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px -100px; /* arrow hovers for modern browsers*/
    }
    
    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px 0; /* arrow hovers for modern browsers*/
    }
    
    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    	background:	url('../images/shadow.png') no-repeat bottom right;
    	padding: 0 8px 9px 0;
    	-moz-border-radius-bottomleft: 17px;
    	-moz-border-radius-topright: 17px;
    	-webkit-border-top-right-radius: 17px;
    	-webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
    	background: transparent;
    }

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can someone help me with this please.

    I ahve a dropdown but require it to have 2 columns on the dropdown.
    is it a case of wrapping a div around the <ul> tags and floating it left with a set width and doign the same for the second column

    thanks


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •