Amazing dropdown menu

**Bornfree** · 09-24-2013, 10:46 PM

Hi Guys,

Can some-one please let me know or point me in the right direction. I really like the menus on the following websites. Where can i make or create something like these. I don't have very much coding knowledge.
http://www.samsung.com/au/#latest-home

I like the above one as the small images change on mouse over showing the products.

http://www.kathmandu.com.au/

This is nice and simple. i would love this one

**Deadweight** · 09-25-2013, 12:31 AM

This shall get you in the right path:

HTML Code:

<!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>Large Box</title>

<style type="text/css">

body, html {
	padding:0px;
	margin:0px;
}

#ul_body {
	list-style: none;
	padding:0px;
	margin:0px;
	width: 80%;
	margin: auto;
	margin-top:5px;
}

#ul_body > li{
	border: 1px solid black;
	float:left;
	margin-left: 5px;
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	border-bottom:none;
}

#ul_body > li:hover{
	background-color: black;
	color:white;
	cursor:pointer;
}

#ul_body > li > div {
	display:none;
	margin:auto;
	position:absolute;
	background-color:black;
	border:1px solid black;
	margin-top:1px;
	border-radius:10px;
	margin-left: -20px;
	padding: 3px;
	max-width:70%;
	cursor: default;
}

#ul_body > li:hover > div {
	display:block;
}

/* Content below the links */
#content {
	clear:both;
	border-top:1px solid black;
	background-color:blue;
	border-bottom:1px solid black;
}

.main {
	width: 80%;
	margin: auto;
	height:300px;
	background-color: white;
	border-left:1px solid grey;
	border-right: 1px solid grey;
}
</style>

</head>

<body>

<div id="nav">
<ul id="ul_body">
	<li>Link One<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Two<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
    	<li>Link Three<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Four<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Five<div>Lorem ipsum dolor sit amet</div></li>

</ul>
</div>

<div id="content">

<div class="main">
Content goes here
</div>

</div>


</body>
</html>

Something like this correct?

**Bornfree** · 09-25-2013, 02:20 AM

Thank you very much for your time Crazykld69

I would like to have something like this one;http://www.samsung.com/au/#latest-home

Where on mouseover the image chages on the top side of the menu. Also the images have a different background then the menu itself.

Sorry to be a pain nut like i said am not a coder.

**Deadweight** · 09-25-2013, 03:37 AM

So more of something like this:

(PS: Only look at first tab)

Code:

<!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>Large Box</title>

<style type="text/css">

body, html {
	padding:0px;
	margin:0px;
}

#ul_body {
	list-style: none;
	padding:0px;
	margin:0px;
	width: 80%;
	margin: auto;
	margin-top:5px;
}

#ul_body > li{
	border: 1px solid black;
	float:left;
	margin-left: 5px;
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	border-bottom:none;
}

#ul_body > li:hover{
	background-color: black;
	color:white;
	cursor:pointer;
}

#ul_body > li > div {
	display:none;
	margin:auto;
	position:absolute;
	background-color:black;
	border:1px solid black;
	margin-top:1px;
	border-radius:10px;
	margin-left: -20px;
	padding: 3px;
	max-width:70%;
	cursor: default;
	min-width: 200px;
	text-align: center;
}

#ul_body > li:hover > div {
	display:block;
}

ul.imgchange {
	list-style:none;
	padding:0;
	margin:0;
}

ul.imgchange li {
	cursor:pointer;	
}

.onebyone > img{
	width:100px;
	height:100px;
	padding:0;
}


/* Content below the links */
#content {
	clear:both;
	border-top:1px solid black;
	background-color:blue;
	border-bottom:1px solid black;
}

.main {
	width: 80%;
	margin: auto;
	height:300px;
	background-color: white;
	border-left:1px solid grey;
	border-right: 1px solid grey;
}
</style>

<script type="text/javascript">

function change_image(the_id,the_image){
	x = document.getElementById(the_id);
	x.innerHTML = '<img src="'+the_image+'" />';
}

</script>

</head>

<body>

<div id="nav">
<ul id="ul_body">
	<li>Link One<div><div id="img1" class="onebyone">
    	<img src="http://industrial-supplies.biz/images/s-i/C48AS.jpg" />
      </div>
        <ul class="imgchange">
        	<li onmouseover="change_image('img1','http://www.clker.com/cliparts/7/H/K/N/L/g/crossed-hammers-bw-100x100-md.png')">Image One</li>
        	<li onmouseover="change_image('img1','http://industrial-supplies.biz/images/s-i/C48AS.jpg')">Image Two</li>
        </ul>
      </div>
    </li>
	<li>Link Two<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
    	<li>Link Three<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Four<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Five<div>Lorem ipsum dolor sit amet</div></li>

</ul>
</div>

<div id="content">

<div class="main">
Content goes here
</div>

</div>


</body>
</html>

**Bornfree** · 09-25-2013, 06:11 AM

Thank you once again for you help Crazykld69

Yes thats what i'm trying to achive. How do i get row side by side and also i want the whole image section to have a white background. is it too much that am asking now?

**Deadweight** · 09-25-2013, 03:22 PM

Code:

<!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>Large Box</title>

<style type="text/css">

body, html {
	padding:0px;
	margin:0px;
}

#ul_body {
	list-style: none;
	padding:0px;
	margin:0px;
	width: 80%;
	margin: auto;
	margin-top:5px;
}

#ul_body > li{
	border: 1px solid black;
	float:left;
	margin-left: 5px;
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	border-bottom:none;
}

#ul_body > li:hover{
	background-color: black;
	color:white;
	cursor:pointer;
}

#ul_body > li > div {
	display:none;
	margin:auto;
	position:absolute;
	background-color:white;
	border:1px solid black;
	margin-top:1px;
	border-radius:10px;
	margin-left: -20px;
	padding: 3px;
	max-width:70%;
	cursor: default;
	min-width: 200px;
	text-align: center;
	color: black;
}

#ul_body > li:hover > div {
	display:block;
}

ul.imgchange {
	list-style:none;
	padding:0;
	margin:0;
}

ul.imgchange li {
	cursor:pointer;	
	text-decoration: underline;
}

.onebyone > img{
	width:100px;
	height:100px;
	padding:0;
}

.multi_content {
	list-style:none;
	padding:0;
}
.multi_content>li {
	float: left;
	padding:2px;
}

/* Content below the links */
#content {
	clear:both;
	border-top:1px solid black;
	background-color:blue;
	border-bottom:1px solid black;
}

.main {
	width: 80%;
	margin: auto;
	height:300px;
	background-color: white;
	border-left:1px solid grey;
	border-right: 1px solid grey;
}
</style>

<script type="text/javascript">

function change_image(the_id,the_image){
	x = document.getElementById(the_id);
	x.innerHTML = '<img src="'+the_image+'" />';
}

</script>

</head>

<body>

<div id="nav">
<ul id="ul_body">
	<li>Link One<div>
      <ul class="multi_content"><li><div id="img1" class="onebyone">
    	<img src="http://industrial-supplies.biz/images/s-i/C48AS.jpg" />
      </div>
        <ul class="imgchange">
        	<li onmouseover="change_image('img1','http://www.clker.com/cliparts/7/H/K/N/L/g/crossed-hammers-bw-100x100-md.png')">Image One</li>
        	<li onmouseover="change_image('img1','http://industrial-supplies.biz/images/s-i/C48AS.jpg')">Image Two</li>
        </ul></li>
        <li><div id="img2" class="onebyone">
    	<img src="http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg" />
      </div>
        <ul class="imgchange">
        	<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg')">Image One</li>
        	<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX20_2.jpg')">Image Two</li>
        </ul></li></ul>
      </div>
    </li>
	<li>Link Two<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
    	<li>Link Three<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Four<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
	<li>Link Five<div>Lorem ipsum dolor sit amet</div></li>

</ul>
</div>

<div id="content">

<div class="main">
Content goes here
</div>

</div>


</body>
</html>

Explains how you can edit it:
Red font color means you have to add it

Visible tabs non-hovered:

Code:

#ul_body > li{
	border: 1px solid black; /* Change border color on top tabs */
	float:left;
	margin-left: 5px; /* Sets the space between each of the tabs */
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	border-bottom:none;
        background-color: green; /* Change background color on non-hover background tabs */
}

Visible tabs once you hover of them:

Code:

#ul_body > li:hover{
	background-color: black; /*changes background color */
	color:white; /*changes font color */
	cursor:pointer;
        border-color: 1px solid green; /*changes the color of the border */
}

The hover content:

Code:

#ul_body > li > div {
	display:none;
	margin:auto;
	position:absolute;
	background-color:white; /* Changes background color */
	border:1px solid black; /*changes border color */
	margin-top:1px;
	border-radius:10px;
	margin-left: -20px;
	padding: 3px;
	max-width:70%;
	cursor: default;
	min-width: 200px;
	text-align: center;
	color: black; /*Color inside the div */
}

Image change links:

Code:

ul.imgchange li {
	cursor:pointer;	
	text-decoration: underline;
        color: red; /* changes the color text */
}

Change color when hovered over change image links:

Code:

ul.imgchange li:hover{
        text-decoration: none;
        color: green; /*changes the font color again */
}

To get the effect of having content next to each other add this:
<ul class="multi_content"><li>Content</li><li>Content</li></ul>

The red is showing where it has been added to the code at the top; so it has already been added.

as seen here:

Code:

<ul class="multi_content"><li><div id="img1" class="onebyone">
    	<img src="http://industrial-supplies.biz/images/s-i/C48AS.jpg" />
      </div>
        <ul class="imgchange">
        	<li onmouseover="change_image('img1','http://www.clker.com/cliparts/7/H/K/N/L/g/crossed-hammers-bw-100x100-md.png')">Image One</li>
        	<li onmouseover="change_image('img1','http://industrial-supplies.biz/images/s-i/C48AS.jpg')">Image Two</li>
        </ul></li>
        <li><div id="img2" class="onebyone">
    	<img src="http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg" />
      </div>
        <ul class="imgchange">
        	<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg')">Image One</li>
        	<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX20_2.jpg')">Image Two</li>
        </ul></li></ul>

**molendijk** · 09-25-2013, 08:53 PM

Both the samsung menu and the kathmandu menu have a serious issue. To see this, go to their sites, resize the window until a horizontal scrollbar appears, then move the mouse over a (main) menu item. The result is a big submenu item that is not entirely visible since the window is small. Now you would think that you could see the rest of the subitem by using the horizontal scrollbar. But as soon as your mouse gets there, the submenu disappears. So you never see the whole submenu item with a smaller window.
Design: ok, functionality: bad, very bad (think of mobile device users).
(I haven't checked the menu proposed by Crazykld69, so I don't know if his (her?) menu has the same issue).

**Deadweight** · 09-25-2013, 10:48 PM

Dont know how it will look on mobile devices; however, i could make a mobile section. Mine (on a smaller screen excluding mobile) should be 70% of the width (unless it under 200px). Should work fine and not appear off the page. That is a should. If there are any problems let me know with this issue.

**james438** · 09-26-2013, 04:16 AM

Originally Posted by Crazykld69

Dont know how it will look on mobile devices; however, i could make a mobile section. Mine (on a smaller screen excluding mobile) should be 70% of the width (unless it under 200px). Should work fine and not appear off the page. That is a should. If there are any problems let me know with this issue.

Could you elaborate on this a bit more. I'm not fully understanding what you are saying here.

**Deadweight** · 09-26-2013, 04:21 AM

Meaning i dont know how it, the menu, will look in mobile view.
Also if you shrink the screen down the div menu should appear off the page unless the width of the website is smaller than 200px.
If there are problems with it (the op) then s/he may ask me.