Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to show drop down menu expanding on left side?

Discussion in 'CSS' started by greatlogix, Dec 20, 2010.

0
  1. #1
    Check Screen shot. Popup menu for "parent 2" is expanding on the left side under "Parent 3" button. i want to expand it on the left side of screen under the "parent 01" button. How is it possible? Following is the html for popup menu. What CSS need to be changed?
    SEMrush 

    <title>Simple Drop Down Menu</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
$(document).ready(function () {	
	
	$('#nav li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(100);

		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(100);			
		}
	);
	
});
	</script>
	
	<style type="text/css">
	body {font-family:arial; font-size:11px;}
	
	/* remove the list style */
	#nav {
		margin:0; 
		padding:0; 
		list-style:none;
	}	
	
		/* make the LI display inline */
		/* it's position relative so that position absolute */
		/* can be used in submenu */
		#nav li {
			float:left; 
			display:block; 
			width:100px; 
			background:#ccc; 
			position:relative;
			z-index:500; 
			margin:0 1px;
		}
		
		/* this is the parent menu */
		#nav li a {
			display:block; 
			padding:8px 5px 0 5px; 
			font-weight:700;  
			height:23px; 
			text-decoration:none; 
			color:#fff; 
			text-align:center; 
			color:#333;
		}

		#nav li a:hover {
			color:#fff;
		}
	
		/* you can make a different style for default selected value */
		#nav a.selected {
			color:#f00;
		}
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		#nav ul li {
			width:200px; 
			float:left; 
			border-top:1px solid #fff;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 8px 5px; 
			color:#666;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}

		/* fix ie6 small issue */
		/* we should always avoid using hack like this */
		/* should put it into separate file : ) */
		*html #nav ul {
			margin:0 0 0 -2px;
		}

	</style>
</head>
<body>

<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#" class="selected">Parent 02 > </a>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#" class="selected">Item 02</a></li>
			<li><a href="#">Item 03</a></li>

		</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03 > </a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>

		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>			
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>
    Code (markup):
     

    Attached Files:

    • menu.JPG
      menu.JPG
      File size:
      7.6 KB
      Views:
      1,357
    greatlogix, Dec 20, 2010 IP
    SEMrush
  2. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #2 
    
#nav ul li {
    border-top: 1px solid #FFFFFF;
    float: left;
    width: 200px;
}
    Code (markup):
    Change width to whatever, e.g. 100px to fit it's parents.
     
    CSM, Dec 20, 2010 IP
  3. WigginsDavid

    WigginsDavid Peon

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    just bring ur mouse on it. and it will appear
     
    WigginsDavid, Dec 20, 2010 IP
  4. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #4
    What a useless post from you... he asked which CSS to change.

    Complete code (added doctype and stuff)

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- start: index --> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head> 
<title>Simple Drop Down Menu</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
$(document).ready(function () {	
	
	$('#nav li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(100);

		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(100);			
		}
	);
	
});
	</script>
	
	<style type="text/css">
	body {font-family:arial; font-size:11px;}
	
	/* remove the list style */
	#nav {
		margin:0; 
		padding:0; 
		list-style:none;
	}	
	
		/* make the LI display inline */
		/* it's position relative so that position absolute */
		/* can be used in submenu */
		#nav li {
			float:left; 
			display:block; 
			width:100px; 
			background:#ccc; 
			position:relative;
			z-index:500; 
			margin:0 1px;
		}
		
		/* this is the parent menu */
		#nav li a {
			display:block; 
			padding:8px 5px 0 5px; 
			font-weight:700;  
			height:23px; 
			text-decoration:none; 
			color:#fff; 
			text-align:center; 
			color:#333;
		}

		#nav li a:hover {
			color:#fff;
		}
	
		/* you can make a different style for default selected value */
		#nav a.selected {
			color:#f00;
		}
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		#nav ul li {
			width:200px; 
			float:left; 
			border-top:1px solid #fff;
		}
		
		#nav ul.alignleft {
			left:-100px;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 8px 5px; 
			color:#666;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}

		/* fix ie6 small issue */
		/* we should always avoid using hack like this */
		/* should put it into separate file : ) */
		*html #nav ul {
			margin:0 0 0 -2px;
		}

	</style>
</head>
<body>

<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#" class="selected">Parent 02 > </a>
		<ul class="alignleft">
			<li><a href="#">Item 01</a></li>
			<li><a href="#" class="selected">Item 02</a></li>
			<li><a href="#">Item 03</a></li>

		</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03 > </a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>

		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>			
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>
</body>
</html>
    Code (markup):
     
    Last edited: Dec 20, 2010
    CSM, Dec 20, 2010 IP
    greatlogix likes this.
  5. greatlogix

    greatlogix Active Member

    Messages:
    664
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #5
    I think i am not able to convey what i need. i need same width as you are seeing in image. Popup is appearing under "Parent 02 and 03" buttons. I want to shift its position to left side so that if I mouseover the "Parent 02" poppup menu should appear under the "Parent 01 and 02". if is set width to 300 , popup get more width on right side. I need it on the left side. Don't know how? I am not good in CSS.
     
    greatlogix, Dec 20, 2010 IP
  6. greatlogix

    greatlogix Active Member

    Messages:
    664
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #6
    Thanks CSM for your kind help. It's working. Rep for you.

    I apologize I am not good in CSS. Just one more question. All menu is sharing same css. Why popup for "Parent 03" is appearing on right side?
     
    greatlogix, Dec 20, 2010 IP
  7. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #7
    add class="alignleft" to the UL for Parent 03.

    I did it like that so you can choose if you want it left or right.
     
    Last edited: Dec 20, 2010
    CSM, Dec 20, 2010 IP
  8. jack05

    jack05 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    i was lookin for something , and i didnt find it until ur website showed it up, so whoever own this site thank u , u helpd me a lot , thank you very much
     
    jack05, Jun 19, 2011 IP
  9. unknownpray

    unknownpray Active Member

    Messages:
    3,832
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    70
    #9
    Follow this code
    #nav ul li
    {
    border-top: 1px solid #FFFFFF;
    float: left;
    width: 200px;
    }
     
    unknownpray, Jul 15, 2011 IP