logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-08-2011, 05:45 PM   #1
shutterleftopen
 
Join Date: Jun 2009
Location: Columbus, Ohio
Posts: 16
Default drop down menu on button displays vertical???

http://iamjmiller.com/index1.html

the link above shows the navigation.

i'm trying to have the rollover drop down menu for "still" and "design" to display like this:



for some reason i can't figure out how to have the menu items display horiztonally.

if this is possible please let me know. i've been searching everywhere and can't find anything.

thanks

here is the css:

Code:
/** navbar **/


#jmiller{
    display: block;
    width: 304;
    height: 127;
    position: relative;
    background-color:transparent;
    top: 20px;
    left: 0px;
    
}

#jmillerbutton{
    display: block;
    width: 304;
    height: 127;
    background:url(../img/jmiller.png) no-repeat 0 0;
    top: 0px;
    left: 0px;
    position: absolute;
    
}

#jmillerbutton span{
    display: none;
}
    





#navigation{
    display: block;
    width: 760px;
    height: 68px;
    left: 440px;
    top: -78px;
    position: relative;
    background-color: transparent;
    border: none;
    
}

#nav1{
    display: block;
    width: 100px;
    height: 68px;
    background:url(../img/still.png) no-repeat 0 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
}

#nav1:hover{
    background-position: 0 -68px;
}

#nav1 span{
    display: none;
}

#nav2{
    display: block;
    width: 194px;
    height: 68px;
    background:url(../img/motion.png) no-repeat 0 0;
    position: absolute;
    top: 0px;
    left: 100px;
    border: none;
}

#nav2:hover{
    background-position: 0 -68px;
}

#nav2 span{
    display: none;
}

#nav3{
    display: block;
    width: 181px;
    height: 68px;
    background:url(../img/design.png) no-repeat 0 0;
    position: absolute;
    top: 0px;
    left: 294px;
    border: none;
}

#nav3:hover{
    background-position: 0 -68px;
}

#nav3 span{
    display: none;
}

#nav4{
    display: block;
    width: 106px;
    height: 68px;
    background:url(../img/bio.png) no-repeat 0 0;
    position: absolute;
    top: 0px;
    left: 475px;
    border: none;
}

#nav4:hover{
    background-position: 0 -68px;
}

#nav4 span{
    display: none;
}

#nav5{
    display: block;
    width: 179px;
    height: 68px;
    background:url(../img/contact.png) no-repeat 0 0;
    position: absolute;
    top: 0px;
    left: 581px;
    border: none;
}

#nav5:hover{
    background-position: 0 -68px;
}

#nav5 span{
    display: none;
}

/** end navbar **/
here is the 2 javascript sections:

menucontent.js

Code:
var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:551px; background:#332b2e', linktarget:'_self'} //Second menu variable. Same precaution.
anylinkmenu1.items=[
    ["music", "music.html"],
    ["portraits", "portraits.html"],
    ["candid", "candid.html"]//no comma following last entry!
]
var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:115px; background:#332b2e', linktarget:'_self'} //Second menu variable. Same precaution.
anylinkmenu2.items=[
    ["Fashion", "fashion.html"],
    ["Beauty", "beauty.html"],
    ["Product", "product.html"],
    ["Commercial", "commercial.html"],
    ["Editorial", "editorial.html"],
    ["Architectural", "architectural.html"] //no comma following last entry!
]
var anylinkmenu3={divclass:'anylinkmenu', inlinestyle:'width:403px; background:#332b2e', linktarget:'_self'} //Second menu variable. Same precaution.
anylinkmenu3.items=[
    ["web", "web.html"],
    ["post", "post.html"],
    ["music", "music.html"] //no comma following last entry!
]

anylinkmenu.js



Code:
if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
    var dd_domreadycheck=false

var anylinkmenu={

menusmap: {},
preloadimages: [],
effects: {delayhide: 100, shadow:{enabled:true, opacity:0.3, depth: [5, 0]}, fade:{enabled:false, duration:400}}, //customize menu effects

dimensions: {},

getoffset:function(what, offsettype){
    return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getoffsetof:function(el){
    el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},

getdimensions:function(menu){
    this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
        docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
        docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
        docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
        docscrolly:window.pageYOffset || this.standardbody.scrollTop
    }
    if (!this.dimensions.dropmenuw){
        this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
        this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
    }
},

isContained:function(m, e){
    var e=window.event || e
    var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    if (c==m)
        return true
    else
        return false
},

setopacity:function(el, value){
    el.style.opacity=value
    if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
        el.style.MozOpacity=value
        if (el.filters){
            el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
        }
    }
},

showmenu:function(menuid){
    var menu=anylinkmenu.menusmap[menuid]
    clearTimeout(menu.hidetimer)
    this.getoffsetof(menu.anchorobj)
    this.getdimensions(menu)
    var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
    var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
    if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
        posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
    }
    if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
        posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
    }
    if (this.effects.fade.enabled){
        this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
        if (this.effects.shadow.enabled)
            this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
    }
    menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
    if (this.effects.shadow.enabled){
        //menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
        menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
    }
    if (this.effects.fade.enabled){
        clearInterval(menu.animatetimer)
        menu.curanimatedegree=0
        menu.starttime=new Date().getTime() //get time just before animation is run
        menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
    }
},

revealmenu:function(menuid){
    var menu=anylinkmenu.menusmap[menuid]
    var elapsed=new Date().getTime()-menu.starttime //get time animation has run
    if (elapsed<this.effects.fade.duration){
        this.setopacity(menu.dropmenu, menu.curanimatedegree)
        if (this.effects.shadow.enabled)
            this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
    }
    else{
        clearInterval(menu.animatetimer)
        this.setopacity(menu.dropmenu, 1)
        menu.dropmenu.style.filter=""
    }
    menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},

setcss:function(param){
    for (prop in param){
        this.style[prop]=param[prop]
    }
},

setcssclass:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

hidemenu:function(menuid){
    var menu=anylinkmenu.menusmap[menuid]
    clearInterval(menu.animatetimer)
    menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
    menu.shadow.setcss({visibility:'hidden', left:0, top:0})
},

getElementsByClass:function(targetclass){
    if (document.querySelectorAll)
        return document.querySelectorAll("."+targetclass)
    else{
        var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
        var pieces=[]
        var alltags=document.all? document.all : document.getElementsByTagName("*")
        for (var i=0; i<alltags.length; i++){
            if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
                pieces[pieces.length]=alltags[i]
        }
        return pieces
    }
},

addDiv:function(divid, divclass, inlinestyle){
    var el=document.createElement("div")
    if (divid)
        el.id=divid
    el.className=divclass
    if (inlinestyle!="" && typeof el.style.cssText=="string")
        el.style.cssText=inlinestyle
    else if (inlinestyle!="")
        el.setAttribute('style', inlinestyle)
    document.body.appendChild(el)
    return el
},

getmenuHTML:function(menuobj){
    var menucontent=[]
    var frag=""
    for (var i=0; i<menuobj.items.length; i++){
        frag+='<li><a href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
        if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
            menucontent.push(frag)
            frag=""
        }
    }
    if (typeof menuobj.cols=="undefined")
        return '<ul>\n' + menucontent.join('') + '\n</ul>'
    else{
        frag=""
        for (var i=0; i<menucontent.length; i++){
            frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
        }
        return frag
    }
},

addEvent:function(targetarr, functionref, tasktype){
    if (targetarr.length>0){
        var target=targetarr.shift()
        if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false)
        else if (target.attachEvent)
            target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
        this.addEvent(targetarr, functionref, tasktype)
    }
},

domready:function(functionref){ //based on code from the jQuery library
    if (dd_domreadycheck){
        functionref()
        return
    }
    // Mozilla, Opera and webkit nightlies currently support this event
    if (document.addEventListener) {
        // Use the handy event callback
        document.addEventListener("DOMContentLoaded", function(){
            document.removeEventListener("DOMContentLoaded", arguments.callee, false )
            functionref();
            dd_domreadycheck=true
        }, false )
    }
    else if (document.attachEvent){
        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top) (function(){
            if (dd_domreadycheck) return
            try{
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left")
            }catch(error){
                setTimeout( arguments.callee, 0)
                return;
            }
            //and execute any waiting functions
            functionref();
            dd_domreadycheck=true
        })();
    }
    if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
        this.addEvent([window], function(){functionref()}, "load");
},

addState:function(anchorobj, state){
    if (anchorobj.getAttribute('data-image')){
        var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
        if (imgobj){
            imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
        }
    }
    else
        anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

addState:function(anchorobj, state){
    if (anchorobj.getAttribute('data-image')){
        var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
        if (imgobj){
            imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
        }
    }
    else
        anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

setupmenu:function(targetclass, anchorobj, pos){
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    var relattr=anchorobj.getAttribute("rel")
    dropmenuid=relattr.replace(/\[(\w+)\]/, '')
    var dropmenuvar=window[dropmenuid]
    var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
    dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
    var menu=this.menusmap[targetclass+pos]={
        id: targetclass+pos,
        anchorobj: anchorobj,    
        dropmenu: dropmenu,
        revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
        orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
        shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
    }
    menu.anchorobj._internalID=targetclass+pos
    menu.anchorobj._isanchor=true
    menu.dropmenu._internalID=targetclass+pos
    menu.shadow._internalID=targetclass+pos
    menu.dropmenu.setcss=this.setcss
    menu.shadow.setcss=this.setcss
    menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
    this.setopacity(menu.shadow, this.effects.shadow.opacity)
    this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
        var menu=anylinkmenu.menusmap[this._internalID]
        if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
            anylinkmenu.showmenu(menu.id)
            anylinkmenu.addState(this, "add")
        }
        else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
            clearTimeout(menu.hidetimer)
        }
    }, "mouseover")
    this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
        if (!anylinkmenu.isContained(this, e)){
            var menu=anylinkmenu.menusmap[this._internalID]
            menu.hidetimer=setTimeout(function(){
                anylinkmenu.addState(menu.anchorobj, "remove")
                anylinkmenu.hidemenu(menu.id)
            }, anylinkmenu.effects.delayhide)
        }
    }, "mouseout")
    this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
        var menu=anylinkmenu.menusmap[this._internalID]
        if ( this._isanchor && menu.revealtype=="click"){
            if (menu.dropmenu.style.visibility=="visible")
                anylinkmenu.hidemenu(menu.id)
            else{
                anylinkmenu.addState(this, "add")
                anylinkmenu.showmenu(menu.id)
            }
            if (e.preventDefault)
                e.preventDefault()
            return false
        }
        else
            menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
    }, "click")
},

init:function(targetclass){
    this.domready(function(){anylinkmenu.trueinit(targetclass)})
},

trueinit:function(targetclass){
    var anchors=this.getElementsByClass(targetclass)
    var preloadimages=this.preloadimages
    for (var i=0; i<anchors.length; i++){
        if (anchors[i].getAttribute('data-image')){ //preload anchor image?
            preloadimages[preloadimages.length]=new Image()
            preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
        }
        if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
            preloadimages[preloadimages.length]=new Image()
            preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
        }
        this.setupmenu(targetclass, anchors[i], i)
    }
}

}
thanks in advance. it's drivin me crazy.
shutterleftopen is offline   Reply With Quote
Old 04-09-2011, 12:04 PM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Generally list items are block elements. Have you tried either floating them left or setting to display: inline; ?
Corrosive is offline   Reply With Quote
Old 04-09-2011, 01:35 PM   #3
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

It would really help to see the html for the menu
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 04-09-2011, 02:15 PM   #4
shutterleftopen
 
Join Date: Jun 2009
Location: Columbus, Ohio
Posts: 16
Default

sorry, here's the hmtl:

Code:
<body>

<div id="wrap">

<div id="jmiller">
    <a id="jmillerbutton" href="index.html"><span>jmillerbutton</span></a>
</div><!-- end jmiller -->


<div id="navigation">
    <a id="nav1" href="#" class="menuanchorclass" rel="anylinkmenu1"><span>still</span></a>
    <a id="nav2" href="#"><span>motion</span></a>
    <a id="nav3" href="#" class="menuanchorclass" rel="anylinkmenu3"><span>design</span></a>
    <a id="nav4" href="bio.html"><span>bio</span></a>
    <a id="nav5" href="contact.html"><span>contact</span></a>

</div><!-- end navigation -->



</div><!-- end wrap -->


</body>
i'm not sure which section i need to change to make the menu items show horiztonally.

is it a section on one of the javascript pages or the css/html??

thanks.
shutterleftopen is offline   Reply With Quote
Old 04-09-2011, 05:40 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

That menu is not really easy to customize the way you want. The HTML should be really an unordered list and the way it relies on javascript to show the sub-items doesn't make it easy either. The menu is this way far from search engine friendly.

Here's a site where you can download dropline menus. You only have to customize the CSS so that it suits in your design.
http://www.cssmenus.co.uk/dropline.html
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:32 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com