Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Amazing dropdown menu

  1. #1
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Amazing dropdown menu

    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

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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?

  3. #3
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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>

  5. #5
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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>
    Last edited by Deadweight; 09-25-2013 at 04:28 PM.

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,398
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    35

    Default

    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).

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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.

  9. #9
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,742
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Quote Originally Posted by Crazykld69 View Post
    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  10. #10
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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.

Similar Threads

  1. chrome dropdown menu dropdown indicator
    By berdman in forum CSS
    Replies: 21
    Last Post: 03-02-2013, 09:37 AM
  2. Replies: 1
    Last Post: 02-23-2011, 06:54 PM
  3. dropdown tabs menu inside dropdown tabs menu
    By mcolton in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-04-2009, 12:40 PM
  4. Amazing Javascript Demonstrations
    By Master_script_maker in forum The lounge
    Replies: 2
    Last Post: 03-29-2009, 01:46 PM
  5. Amazing Functions in JavaScript
    By magicyte in forum JavaScript
    Replies: 21
    Last Post: 08-12-2008, 12:22 PM

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
  •