Looking for a drop down menu box like Google or Facebook

Discussion in 'HTML & Website Design' started by unlesh, Aug 9, 2011.

0
Page 1 of 2
  1. #1
    Hello Friends,

    I am looking for a drop down menu for 1 column just like in the image below.

    2qv858w.jpg

    Thanking you !
     
    Solved! View solution.
    unlesh, Aug 9, 2011 IP
  2. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #2
    Thorlax402, Aug 9, 2011 IP
  3. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #3
    these are simple drop down I want just like google or facebook which drops on left side!
     
    unlesh, Aug 9, 2011 IP
  4. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #4
    I'm afraid those are just simple css customizations to the kind of method shown in the tutorial. Lots of sites have drop down menus, but you might think they are different because of the effect and how they are styled. Google and Facebook make their own dropdowns like this as do most websites that use them. I'm sure there are jquery functions that make it easier, but you'll have to poke around for or make exactly what you are looking for.
     
    Thorlax402, Aug 9, 2011 IP
  5. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #5
    I know that - I am not a professional coder - Can you make it for me like that?
     
    unlesh, Aug 9, 2011 IP
  6. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #6
    I could, but it wouldn't be free. Depending on how you want it style I could do it for as low as $20.
     
    Thorlax402, Aug 9, 2011 IP
  7. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #7
    $20 - I think I should wait for someone :D
     
    unlesh, Aug 9, 2011 IP
  8. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #8
    suite yourself
     
    Thorlax402, Aug 9, 2011 IP
  9. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #9
    Thanks for your offer anyway!
     
    unlesh, Aug 9, 2011 IP
  10. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #10
    Since I was bored I made a rough design of the concept for you anyway. Not exactly the perfect styling of google or facebook, but functional and a good starting point:

    
<html>
<head>
<style type="text/css">
* {
	border: 0;
	padding: 0;
	margin: 0;
	font-family: Times;
}

#settingsBar {
	background: #333333;
	height: 25px;
	padding-right: 5px;
}

#settingsBar ul {
	list-style: none;
	float: right;
}

#settingsBar ul li {
	float: left;
	border-left: 1px solid #cccccc;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	text-align: center;
	height: 15px;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
}

#settingsBar ul li:first-child {
	border-left: 0;
}

#settingsBar ul li:hover {
	background-color: #555555;
}

#settingsBar ul li.selected {
	background-color: #ffffff;
	color: #000000;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
}

#settingsBar ul li ul {
	border: 1px solid #666666;
	border-top: 0;
	display: none;
	position: absolute;
	top: 25px;
	right: -1px;
	width: auto;
}

#settingsBar ul li ul li {
	background-color: #ffffff;
	color: #333333;
	border: 0;
	height: 15px;
	padding: 10px 20px;
	float: none;
	white-space: nowrap;
	text-align: left;
}

#settingsBar ul li ul li:hover {
	background-color: #cccccc;
	text-decoration: underline;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#settingsBar').children('ul').children().each(function(index, value) {
		$(this).click(function() {
			var ul = $('ul', this);
			if (ul.is(':visible')) {
				$(this).removeClass('selected');
				ul.hide();
			} else {
				$(this).closest('ul').find('ul').each(function(i,v) {
					$(this).parent().removeClass('selected');
					$(this).hide();
				});
				
				$(this).addClass('selected');
				ul.show();
			}
		});
	});
});
</script>
</head>

<body>
<div id="settingsBar">
	<ul>
		<li>Test 1
			<ul>
				<li>Dropdown Item 1</li>
				<li>Dropdown Item 2</li>
			</ul>
		</li>
		<li>Settings
			<ul>
				<li>Search Settings</li>
				<li>Sign Out</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>
    HTML:
     
    Thorlax402, Aug 9, 2011 IP
  11. pr02

    pr02 Greenhorn

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #11
    I can do this for $10. Contact me if you are interested.
     
    pr02, Aug 9, 2011 IP
  12. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #12
    Thanks man really great job as you said not really good with css that the main thing for me I will ask someone who can modified your code thanks really appreciated your work :). You also try to fix the css the main thing the dropdown menu comes when someone click on it

     
    Last edited: Aug 9, 2011
    unlesh, Aug 9, 2011 IP
  13. i-WatchMoviesFREE

    i-WatchMoviesFREE Peon

    Messages:
    60
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    You need to code a select list ( <SELECT ...> )

    Put this in the header

    <SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>
    Code (markup):
    Now Code Your Select List As Seen Below. You Will Need To Edit in your own information


    <FORM 
     ACTION="../cgi-bin/redirect.pl" 
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">TEXT HERE FOR SELECTION

<OPTION VALUE="" >TEXT OPTION 1
<OPTION VALUE="" >TEXT OPTION 2
<OPTION VALUE="" >TEXT OPTION 3

</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
    Code (markup):
     
    Last edited: Aug 9, 2011
    i-WatchMoviesFREE, Aug 9, 2011 IP
  14. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #14
    WHy is this drop down list for?
     
    unlesh, Aug 9, 2011 IP
  15. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #15
    Pretty sure he copy and pasted that from somewhere as he did not specify the contents of the form action nor a means to submit the form (which is how his javascript is supposedly executed).
     
    Thorlax402, Aug 9, 2011 IP
  16. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #16
    I don't want any javascript! I just need the css I will add manually links on it
     
    unlesh, Aug 10, 2011 IP
  17. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #17
    Toycel, Aug 10, 2011 IP
  18. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #18
    This is quite different I want like Google Can you edit the Thorlax402 Code? He made the same as google just a css problem there
     
    unlesh, Aug 10, 2011 IP
  19. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #19
    Actually, I was unaware you didn't want javascript. You realize that the code I provided uses javascript right?
     
    Thorlax402, Aug 10, 2011 IP
  20. unlesh

    unlesh Active Member

    Messages:
    123
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #20
    Yes right even I didn't tell that I don't need javascript
     
    unlesh, Aug 10, 2011 IP
Page 1 of 2