Avatar billede rookie Nybegynder
27. oktober 1999 - 09:43 Der er 5 kommentarer og
4 løsninger

dropdown som www.monogram.dk

Er her nogle som har et fuldfuktionelt eksempel på en dropdownmenu, som http://www.monogram.dk bruger? Jeg ved, at "kan" skrev, at han havde et liggende...(jvf. http://www.eksperten.dk/spm.asp?id=270 )

Andre???
Avatar billede rookie Nybegynder
27. oktober 1999 - 10:13 #1
help???? please????
Avatar billede jumper Nybegynder
27. oktober 1999 - 10:44 #2
monogram.dk's dropdown menu er lavet med Javascript og DHTML.

Du får nok ikke nogle til at lave det gratis for dig ;)

/Thor
Avatar billede rookie Nybegynder
27. oktober 1999 - 10:57 #3
come on...skulle det være et svar, Thor????

Har du læst http://www.eksperten.dk/spm.asp?id=270 ???

Prøv igen.. ;o)
Avatar billede rookie Nybegynder
27. oktober 1999 - 10:58 #4
det behøver ikke nødvendigvis at være helt så fancy...bare noget, der kan droppe down, og som ikke er en select-funktion.
Avatar billede starleicht Nybegynder
27. oktober 1999 - 12:43 #5
Prøv at kigge her:

http://www.bratta.com/dhtml/scripts.html

Der er to eksempler: "menubar" og "menubar2"
Avatar billede cyberesben Nybegynder
27. oktober 1999 - 13:59 #6
kig på http://www.dansteinman.com/dynduo der står hvordan
Avatar billede limemedia Nybegynder
28. oktober 1999 - 09:55 #7
Det er utroligt simpelt i Dreamweaver at lave det i layers.

Vi kan snakke om at jeg skal lave det til dig, evt for lidt banner reklame...

Kontakt pr. email hvis interesseret
Avatar billede skjoldby Nybegynder
02. november 1999 - 15:08 #8
Hey rookie.
Gælder det stadig, for så har jeg et lige til dig. Du skal bare bytte værdierne ud:
Jeg har rodet lidt med et www.bratta.com's scripts så det kom til at se lidt pænere ud (centreret i dropdown-boxene):

<html>
<head>
<title>Menu</title>

<style>
body{background-color:#FFFFFF}
A{color:#FFFFCC; text-decoration:none}
A:hover{color:#FFFFCC; text-decoration:underline}
A:visited:{color:#CCCCFF; text-decoration:none}
TD{font-family:arial,helvetica; font-size:10pt}
</style>




<style>
A:hover{color:#FFFFCC; text-decoration:underline}



#divBg{position:absolute; width:630; top:0; left:0; visibility:hidden; height:100;}
#divBgColor{position:absolute; top:0; left:0; width:630; height:30; clip:rect(0,630,30,0);
background-color:#003366; layer-background-color:#003366}

DIV.clTop{position:absolute; font-family:arial,helvetica; text-align:center; font-weight:bold; font-size:13px;
color:#FFFFCC; visibility:visible; left:100; top:20; width:90;}
DIV.clSub{position:absolute; top:20; left:0; width:90;  visibility:hidden; font-family:arial, helvetica;
font-weight:normal; font-size:12px; background-color:#003366; layer-background-color:#003366;
text-align:center; color:#FFFFCC; clip:    rect(0 90 60 0)}

#divTop0{left:0; top:5}
#divTop1{left:90; top:5}
#divTop2{left:180; top:5}
#divTop3{left:270; top:5}
#divTop4{left:360; top:5}
#divTop5{left:450; top:5}
#divTop6{left:540; top:5}
</style>



<script language="JavaScript1.2">

/Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

//How many menus do you have
numberOfMenus=7


//Do you want to hide all the other submenus when you click a new?
var hideAll=true


/********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
    nest=(!nest) ? ':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    this.hideIt=b_hideIt;    this.showIt=b_showIt                   
    if(ie && vis) this.css.visibility='hidden'
    this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);   
    this.go=0
    this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
    this.top=b_gettop
    this.obj = obj + "Object";    eval(this.obj + "=this")   
}
//Get's the top position.
function b_gettop(){
        var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
        return gleft;
}
//The functions for showing and hiding
function b_showIt(){
        this.css.visibility="visible"
}
function b_hideIt(){
        this.css.visibility="hidden"
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
        if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
        if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it..
********************************************************************************/
function menuBarInit(){
        oSub=new Array()
        oTop=new Array()
        for(i=0;i<numberOfMenus;i++){
                oTop[i]=new makeMenuBar('divTop'+i,'divBg')
                oSub[i]=new makeMenuBar('divSub'+i,'divBg.document.divTop'+i,1)
                oSub[i].evnt.onmouseout=evOut;
        }
        //Moving menuBar
        oMenu=new makeMenuBar('divBg')
        scrolled=n?"window.pageYOffset":"document.body.scrollTop"
        oMenu.css.top=eval(scrolled)
        oMenu.css.visibility='visible'
        if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();

}

/********************************************************************************
Shows and hides the submenus
********************************************************************************/

function evOut(){
        if(ie)this.style.visibility='hidden'
        else if(n) this.visibility='hidden'
}
//Canceling event bubbling in ie
function ieShow(num){
        if(ie){
                oSub[num].showIt()
                window.event.cancelBubble=true
        }
}
function extract(num){
        if(hideAll){
                for(i=0;i<oSub.length;i++){
                        if(num!=i) oSub[i].hideIt()
                }
        }
        oSub[num].showIt();
}
onload=menuBarInit;


</script>
</head>
<body bgcolor="White">
<div id="divBg">
<div id="divBgColor"></div>
  <div id="divTop0" class="clTop"><a href="#" onmouseover="extract(0)">Humor</a>
    <div id="divSub0" class="clSub">
        <a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 3</a><br>
        <br>
        </div>
    </div>
   
   
  <div id="divTop1" class="clTop"> <a href="#" onmouseover="extract(1)">Artikler/hist.</a>
    <div id="divSub1" class="clSub">
                  <a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 3</a><br>
        <br>
        </div>
    </div>
   
   
  <div id="divTop2" class="clTop"> <a href="#" onmouseover="extract(2)">Dikt</a>
    <div id="divSub2" class="clSub">
              <a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 3</a><br>
        <br>
        </div>
    </div>
   
   
  <div id="divTop3" class="clTop"> <a href="#" onmouseover="extract(3)">Parodier</a>
    <div id="divSub3" class="clSub">
              <a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 3</a><br>
        <br>
        </div>
    </div>
   
   
  <div id="divTop4" class="clTop"> <a href="#" onmouseover="extract(4)">Linker</a>
    <div id="divSub4" class="clSub">
              <a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 3</a><br>
        <br>
        </div>
    </div>

   
  <div id="divTop5" class="clTop"> <a href="#" onmouseover="extract(5)">Lister</a>
    <div id="divSub5" class="clSub">
              <a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 3</a><br>
        <br>
        </div>   
    </div>

   
  <div id="divTop6" class="clTop"> <a href="#" onmouseover="extract(6)">Annet</a>
    <div id="divSub6" class="clSub">
              <a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 1</a><br>
        <a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 2</a><br>
        <a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 3</a><br>
        <br>
        </div> 
    </div>
</div>



</BODY>
</HTML>


Avatar billede rookie Nybegynder
23. maj 2000 - 08:59 #9
selv om ingen af jer leverede den helt rigtige vare, må jeg hellere afgive points alligevel *S* Men igen - hvad kan man forvente af 85 point, som ikke har kostet mig noget??? :o)
Tak for forsøgene, gutter :o)
rookie
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester