Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: Amazing dropdown menu

  1. #11
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,689
    Thanks
    82
    Thanked 89 Times in 87 Posts

    Default

    Ah, thanks for explaining.
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Crazykld69, I tried the code you posted in # 6. It has the same issue as the samsug and kathmandu for certain links in a very small window (240 px, 320px). You could deal with the image(s) by sizing it/them with percentages. As for text blocks (that open after the mouse hovers over a link), see this code and this blog.

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

    Default

    Hi Guys,

    I just need a little help. The text in the menu, i need it to be in the middle of the menu background image. (vertical align-centre). I cannot seem to figure that out. Can you please help me? Here is the link to my test page. http://www.elsema.com/menutest1.html

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Around line 121 in elsema.com/cs/global.css:

    Code:
    #ul_menu1 > li{
    	float:left;
    	height:35px;
    	z-index:999;
    	margin-left: 1px; /* Sets the space between each of the tabs */
    	padding:7px 30px 0px 30px;
    	background:url(../images/menubdr.jpg) right top no-repeat;
    	
    	
       
    	
    	
    }
    Make the change (red) in the highlighted line.

    And, if the gap between the headers and the drop downs bothers you (I think it looks good), around line 145:

    Code:
    #ul_menu1 > li > div {
    	display:none;
    	margin:auto;
    	position:absolute;
    	z-index:999;
    	background-color:#012e56; /* Changes background color */
    	border:1px solid black; /*changes border color */
    	margin-top:10px;
    	border-radius:10px;
    	margin-left: -20px;
    	padding: 3px;
    	max-width:100%;
    	cursor: default;
    	min-width: 200px;
    	text-align: center;
    	color: black; /*Color inside the div */
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Bornfree (10-10-2013)

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

    Default

    OMG, So easy. Thank you once again jscheuer1. Just another small issue. If you look closly, in the dropdown menu there is a small black dot in the top right hand corner. Can't seem to get rid og that. I guess its in the code somewhere.

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

    Default

    Oops! found the mistake. Got it sorted. Thank you for all the help.

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

    Default

    Ok i have another glitch. When mouseover the menu, the dropdown starts from the position of the menu on which you have your mouse, so when i go to the one on the right hand side, the dropdown gets vertical. Can i have it so that it always horizontal and move to the left if there is not enought room on the right? If you see this page http://www.elsema.com/menutest1.html and take mouse over the menu on the right you will see it.

  9. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Unless I misunderstand, that's not a glitch. I believe that's the default layout for the menu. To get what I think you're saying you want, again in the global.css file, this time around line 140, add the two highlighted lines:

    Code:
    #ul_menu1 > li > div {
    	display:none;
    	margin:auto;
    	position:absolute;
    	z-index:999;
    	background-color:#012e56; /* Changes background color */
    	border:1px solid black; /*changes border color */
    	margin-top:10px;
    	border-radius:10px;
    	left: 30px;
    	margin-left: -30px;
    	margin-right: 0px;
    	padding: 3px;
    	max-width:100%;
    	cursor: default;
    	min-width: 200px;
    	text-align: center;
    	width: 953px;
    	color: black; /*Color inside the div */
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Bornfree (10-14-2013)

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

    Default

    Thanks jscheuer1. The menu seems to stick to the left. Can it be made so that it appears on the center of the menu (whichever the mouse is on)? Please have a look at menu two. The right side comes in. It looks funny. Can it be that the whole dropdown is centered but still within the page width.

    Also on menu two and menu three the image does not change on mouseover. Where am i missing the code?

  12. #20
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    That might take a little time to work out. I thought you just wanted them all left aligned.

    Anyways, the reason the rollover only works on the first one is that there can only be one element with an id of img1 on the page. If you have more than one the code will either throw an error (older browsers) or pick the first one and use that. The latter must be what's happening. The rollover is working but the image that's changing cannot be seen. I just tested it and I can control the images on Menu One from Menu Two.

    Each div whose image that you're changing must have it's own unique id and be referenced as such in the rollover events.

    Like, on Menu Two you could have img1a, img2a, ect.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. chrome dropdown menu dropdown indicator
    By berdman in forum CSS
    Replies: 21
    Last Post: 03-02-2013, 08:37 AM
  2. Replies: 1
    Last Post: 02-23-2011, 05: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, 11:40 AM
  4. Amazing Javascript Demonstrations
    By Master_script_maker in forum The lounge
    Replies: 2
    Last Post: 03-29-2009, 12:46 PM
  5. Amazing Functions in JavaScript
    By magicyte in forum JavaScript
    Replies: 21
    Last Post: 08-12-2008, 11:22 AM

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
  •