Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Help required with Anylink Drop Down Menu!

  1. #1
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Help required with Anylink Drop Down Menu!

    1) Script Title: Anylink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    3) Describe problem:

    See following website for design and code: http://www.arti-mo.com/watubedoelt. Note this is still under construction and the links don't work yet!

    I have used images for the menu. Suppose this is no problem in respect to accesibility for search engines?

    My question is the following:

    The friend I am making this website for wants the menu to be shown at the bottom with the submenu going up (in stead of drop down) and horizontal (in stead of vertical). Can this be made? What should I change in the script to make it work as required?

    Thanks for any good help you can give me!

    Regards,
    Monique

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is nothing so special about the menu images that they couldn't be rendered as styled text but, as long as you have the alternate attributes for the images well defined, it shouldn't be too much of a problem for search engines, text would be better for them though.

    However, you've got bigger problems than that. Try looking at the page in a standards compliant browser like Fire Fox or Opera. The menu triggers and the rest of the page look similar to IE but the dropmenudiv appears at the top of the page when activated.

    This is due to an overuse of position:absolute in the design of the page.

    To get the menus to always move up, comment out these lines as shown:

    Code:
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    //if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    //if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    //edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    //}
    }
    return edgeoffset
    }
    But, even in IE, with all that absolute positioning, this causes them to drop up behind the other content. To fix that, add this to the style:

    Code:
    #dropmenudiv {
    	position:absolute;
    	width:820px;
    	bottom:20px;
    	z-index:1;
    }
    However, as I indicated, the entire page should be redesigned without so much absolute positioning if you want it to be accessible in other browsers.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I looked into this a bit more, here is an alternate stylesheet that makes this layout work in other browsers as well as IE:

    Code:
    <style type="text/css">
    
    body {
    	background-color:#F5D388;
    	scrollbar-face-color:#f5d388;
    	scrollbar-highlight-color:#f5c55c;
    	scrollbar-3dlight-color:#f3ede0;
    	scrollbar-darkshadow-color:#f5c55c;
    	scrollbar-shadow-color:#f3ede0;
    	scrollbar-arrow-color:#502800;
    	scrollbar-track-color:#f3ede0;
    }
    
    #bg {
    	position:relative;
    	width:820px;
    	height:520px;
    	background-image: url(afbeeldingen/bg.jpg);
    	border:0px;
    	font-family:"verdana","arial","helvetica","sans-serif";
    	font-size:12px;
    	color:#502800;
    	margin:5% auto;
    }
    
    * html #bg {
    top:expression(Math.max(document.documentElement.clientHeight/2-260, 0)+'px');
    }
    
    #logo {
    	position:relative;
    	width:200px;
    	height:100px;
    }
    
    #tekst {
    	position:relative;
    	width:770px;
    	height:300px;
    	background-color:transparent;
    	text-align:left;
    	overflow:auto;
    }
    
    #menu {
    	position:relative;
    	width:820px;
    	margin-left:8px;
    }
    #menu a {
    display:block;
    float:left;
    }
    
    #dropmenudiv {
    	position:absolute;
    	z-index:1;
    }
    
    </style>
    It requires a DOCTYPE for the page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    
    <head>
    <title>Wat U bedoelt - tekstbureau, tekstschrijven, teksttrainingen, laten schrijven, leren schrijven</TITLE>
    These changes to the script:

    Code:
    var menuwidth='150px' //default menu width
    var menubgcolor='transparent'  //menu bgcolor
    And the width parameter used here and similar should be 150px:

    Code:
    onMouseover="dropdownmenu(this, event, menu1, '200px')"
    not 200px as shown.
    - John
    ________________________

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

  4. #4
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post

    Thanks very much John.

    I hadn't checked yet in the other browsers, and you were absolutely right, it looked awfull. Further I didn't realise that absolute positioning could cause such big problems...

    I have followed your advise and made all the changes. Now it looks much better than before (in all browsers).

    Have to bother you with two more questions, an 'old' one and a 'new' one:

    1) Is there a way to show the submenu in a horizontal way in stead of the vertical block?

    2) After the changes now in IE there is a slight stroke right from bg in a lighter colour which shouldn't be there. It only appears in IE, not in the other browsers. How did that come and how can I improve that?

    Thanks again and have a nice day.

    Regards,
    Monique

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not clear on what you mean by "show the submenu in a horizontal way". About the "stroke", that is the background image bleeding, add this:

    Code:
    #bg {
    	position:relative;
    	width:820px;
    	height:520px;
    	background-image: url(afbeeldingen/bg.jpg);
    	background-repeat:no-repeat;
    	border:0px;
    	font-family:"verdana","arial","helvetica","sans-serif";
    	font-size:12px;
    	color:#502800;
    	margin:5% auto;
    }
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I think I got an idea of what you might mean by horizontal, if you make these like so:

    Code:
    onMouseover="dropdownmenu(this, event, menu1, '480px')"
    and:

    Code:
    onMouseover="dropdownmenu(this, event, menu2, '640px')"
    The menus will be horizontal. All that appears to be required is that there be enough width provided and they will stretch out by themselves but, at some point you will (especially in smaller windows) come up against the right edge of the window, this may have odd results.

    Added Later:

    I figured out a way to modify the script for this new problem, if this type of horizontal display is what you have in mind.
    Last edited by jscheuer1; 10-16-2006 at 04:52 PM.
    - John
    ________________________

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

  7. #7
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I changed the code for the background-image accordingly and it looks much better now. How simple can it sometimes be...?

    Indeed you had the right idea of what I meant by 'horizontal'. If you now look again on the site (http://www.arti-mo.com/watubedoelt) you will see the menu horizontal. Meanwhile I created a few more items in the various menus (for this I used the image of 'persbericht' a few times). Is there a way to start the submenu always on the left - so that it will always start above 'home'? Or do you think that will look 'confusing' to visitors of the site?

    Thanks very much again!

    Monique

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    All you need to do is set the home link as the object in the function dropdownmenu(obj, e, menucontents, menuwidth). To do that, add this line:

    Code:
    function dropdownmenu(obj, e, menucontents, menuwidth){
    var obj=document.getElementById? document.getElementById('setleft') : document.all['setleft'];
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhid . . .
    And add the id to the home link:

    Code:
    <a id="setleft" href="home.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '480px')" onMouseout="delayhidemenu()"><img src="afbeeldingen/menuknophome.jpg" border="0" alt="home"></a>
    - John
    ________________________

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

  9. #9
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow, this is really wonderful!

    I very much envy your knowledge about all this!

    Tomorrow I have a meeting with my friend to discuss everything. Hope she'll like it too...

    Thanks, Monique

  10. #10
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Sort of promised you to come back on my 'challenges'. As said I had a meeting with my friend to discuss the design for her website. She loved much of it though not all, so I had to make some changes again. The submenu is now again showing vertical... all that effort for nothing... Well I believe I have learned a lot anyway

    Personally I would make the colours/design a bit more vivid, but than, who am I... it's her website...

    Can I ask you one more question please?

    You know I have fallen in love with Dynamic Drive and I definitely want to use only Dynamic Drive scripts Does Dynamic have a script like this: http://www.websonic.nl/javascripts/s...lk/status1.php? I'd like to set up a text in the status bar that is "being typed" while reading it... Or do I have to ask this question in another forum?

    Many many thanks,
    Monique

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
  •