[dom][css] positionering bottom mbv hidden menu - Softwareontwikkeling

donderdag 30 oktober 2003 10:41

Acties:

be

Topicstarter

ik ben bezig met een menutje. die klapt dan mooi uit en als ik hem dan bovenaan de pagina zet klapt alles heel netjes naar beneden uit. maar helaas! ik wil hem aan de onderkant van mn scerm hebben.

even makkelijk mijn menustructuur uitleggen:

menu: 1 div met absolute positionering bottom *px met daarin een paar divjes

HTML:

<div id="menu2" class="menu" onmouseover="showContent(this.id);" onmouseout="hideContent(this.id);">
<div class="hiddenchild"><a href="(link to be)">menu item</a></div>
<div class="hiddenchild"><a href="(link to be)">menu item</a></div>
menu 1
</div>

daar staan er dan een paar van in de bottom div.

dan hebben dus de hiddenchilds een display:none en als je erover gaat laat ik gewoon dmv een loop door de childNodes de nodes zien. lekker makkelijk en de javascript blijft klein.

maar het grote probleem. doordat ik die menu`s in een div heb staan en die dus onderaan de pagina heb gaat het ene menu item keihard mee naar boven als ik er op een klik.
Afbeeldingslocatie: http://picserver.student.utwente.nl/getpicture.php?id=446315

Afbeeldingslocatie: http://picserver.student.utwente.nl/getpicture.php?id=446315

enig idee hoe ik dat onderaan zou kunnen zetten?
_{ik geloof dat we hier weer in het vertical align verhaaltje... maar mischien}

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 10:49

Acties:

crisp

Devver

Pixelated

niet met display werken maar met visibility en absoluut gepositioneerde layers.

opzetje:

PHP:

<div style="position:relative;width:200px;height:200px;border:1px solid red">
  <div style="position:absolute;bottom:0px;width:50px;height:20px;background-color:yellow"
    onclick="document.getElementById('menu1').style.visibility='visible'">
    Menu 1
    <div id="menu1" style="position:absolute;left:0px;bottom:20px;visibility:hidden">
      Item 1<br />Item 2<br />Item 3<br />Item 4
    </div>
  </div>
</div>

Intentionally left blank

donderdag 30 oktober 2003 10:52

Acties:

disjfa

be

Topicstarter

ja i know

maar wat ik dus eigenlijk wil is juist een geheel dynamische menu.

zodat je niet moeilijk hoeft te doen met elk menu item weer opnieuw positioneren en dus een bak met css minder.

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 10:55

Acties:

crisp

Devver

Pixelated

disjfa schreef op 30 oktober 2003 @ 10:52:
ja i know maar wat ik dus eigenlijk wil is juist een geheel dynamische menu.

zodat je niet moeilijk hoeft te doen met elk menu item weer opnieuw positioneren en dus een bak met css minder.

de css van elk menu kan in mijn voorbeeld gelijk zijn - hij wordt immers ten opzichte van z'n parent gepositioneerd.

Intentionally left blank

donderdag 30 oktober 2003 10:56

Acties:

Willem

Wat is er niet geheel dynamisch aan het voorbeeld van crisp?

Motor (of auto) onderhoud bijhouden

donderdag 30 oktober 2003 11:11

Acties:

disjfa

be

Topicstarter

je moet er alleen wel elke keer tegen het menudivje zeggen hoever die naar links staat. ik ben er zelf even verder mee wezen spelen en heb al wel wat werkends gekregen onder opera en mozilla.

alleen nu wil hij bij IE de nare gewoonte hebben om het menu er niet recht boven te zetten maar aan het eind van het menudiv woord.

als ik het overigens verkeerd zie over die left vertel het dan aub

edit:
crisp je moet hem een keer in opera openen

we praten verder erg langs elkaar heen

ik begrijp hoe het zo inelkaar moet zitten.... maar ik wil het net wat flexibeler....

[ Voor 21% gewijzigd door disjfa op 30-10-2003 11:21 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 11:16

Acties:

crisp

Devver

Pixelated

een heel acceptabel opzetje (verdere logica en opmaak moet je zelf maar verzinnen):

PHP:

<html>
<head>
<title>test</title>
<style type="text/css">

body,html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#menucontainer {
  position: absolute;
  left:20px;
  bottom: 0px;
  height: 20px;
}

div.menutitle {
  position: relative;
  float:left;
  width: 78px;
  height: 18px;
  border: 1px solid red;
  cursor: pointer;
  cursor: hand;
  margin-right: 2px;
}

div.menu {
  position: absolute;
  left: 2px;
  bottom: 22px;
  width: 78px;
  border: 1px solid blue;
  visibility: hidden;
}

div.relative {
  position: relative;
}

</style>
<script type="text/javascript">

function show_menu(num) {

  document.getElementById('menu'+num).style.visibility = 'visible';

}

function hide_menu(num) {

  document.getElementById('menu'+num).style.visibility = 'hidden';

}

</script>
<body>
<div id="menucontainer">
  <div class="menutitle" onmouseover="show_menu(1)" onmouseout="hide_menu(1)">
    <div class="relative">
      Menu 1
      <div class="menu" id="menu1">
        Item 1<br />Item 2<br />Item 3<br />Item 4
      </div>
    </div>
  </div>
  <div class="menutitle" onmouseover="show_menu(2)" onmouseout="hide_menu(2)">
    <div class="relative">
      Menu 2
      <div class="menu" id="menu2">
        Item 1<br />Item 2<br />Item 3<br />Item 4
      </div>
    </div>
  </div>
  <div class="menutitle" onmouseover="show_menu(3)" onmouseout="hide_menu(3)">
    <div class="relative">
      Menu 3
      <div class="menu" id="menu3">
        Item 1<br />Item 2<br />Item 3<br />Item 4
      </div>
    </div>
  </div>
</div>
</body>
</html>

Intentionally left blank

donderdag 30 oktober 2003 11:38

Acties:

disjfa

be

Topicstarter

hmmz ik zie nou zelf dat ik eigenlijk het zelfde menu heb gemaakt als jou eik

maar dat heb ik nou verandert.

wat hij nu aanroept naar de functie is showMenu(this) die this is dus het menu divje. daar loopt hij doorheen en zet de childNode op visible. wat ik dus hiermee uiteindelijk wil (en eigenlijk ook al doet op exporer na) is dus dat je alleen een divje moet kopieren en vanuit daar ALLEEN de linkjes en veranderen. niets tussen de < > in de divjes.

het laatste probleem wat ik nu dus heb is dat het niet mooi wilt uitlijnen in explorer... daar staan de menutjes rechts naast de menutext.

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 11:46

Acties:

crisp

Devver

Pixelated

disjfa schreef op 30 oktober 2003 @ 11:38:
hmmz ik zie nou zelf dat ik eigenlijk het zelfde menu heb gemaakt als jou eik maar dat heb ik nou verandert.

wat hij nu aanroept naar de functie is showMenu(this) die this is dus het menu divje. daar loopt hij doorheen en zet de childNode op visible. wat ik dus hiermee uiteindelijk wil (en eigenlijk ook al doet op exporer na) is dus dat je alleen een divje moet kopieren en vanuit daar ALLEEN de linkjes en veranderen. niets tussen de < > in de divjes.

daar is best een mouw aan te passen hoor door in plaats van een nummertje inderdaad vanaf het huidige element de childNodes af te lopen.

het laatste probleem wat ik nu dus heb is dat het niet mooi wilt uitlijnen in explorer... daar staan de menutjes rechts naast de menutext.

mwa, in mijn voorbeeld geen last van hoor

Intentionally left blank

donderdag 30 oktober 2003 11:48

Acties:

disjfa

be

Topicstarter

crisp schreef op 30 oktober 2003 @ 11:46:
[...]
mwa, in mijn voorbeeld geen last van hoor

zou je die een keer willen proberen in opera voor me dan

edit:
hmmz komt doordat jij er juist een divje extra tussen hebt zitten.... wil maar niet echt lukken... maar het komt wel een keer

[ Voor 26% gewijzigd door disjfa op 30-10-2003 11:56 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 11:56

Acties:

crisp

Devver

Pixelated

disjfa schreef op 30 oktober 2003 @ 11:48:
[...]

zou je die een keer willen proberen in opera voor me dan

Als ik de menucontainer voldoende width geef werkt het daar ook prima

Intentionally left blank

donderdag 30 oktober 2003 12:05

Acties:

disjfa

be

Topicstarter

nice

en zo zonder id`s

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 
<title>test</title> 
<style type="text/css"> 

body,html { 
  margin: 0px; 
  padding: 0px; 
  height: 100%; 
} 

#menucontainer { 
  position: absolute; 
  left:20px; 
  bottom: 0px; 
  height: 20px; 
  width:300px;
} 

div.menutitle { 
  position: relative; 
  float:left; 
  width: 78px; 
  height: 18px; 
  border: 1px solid red; 
  cursor: pointer; 
  cursor: hand; 
  margin-right: 2px; 
} 

div.menu { 
  position: absolute; 
  left: 2px; 
  bottom: 22px; 
  width: 78px; 
  border: 1px solid blue; 
  visibility: hidden; 
} 

div.relative { 
  position: relative; 
} 

</style> 
<script type="text/javascript"> 

function show_menu(obj) { 
    for(i=0;i<obj.childNodes.length;i++){
        objNode = obj.childNodes[i];
        for(j=0;j<objNode.childNodes.length;j++){
            if(objNode.childNodes[j].nodeType==1){
                objNode.childNodes[j].style.visibility="visible";
            }
        }
    }
} 

function hide_menu(obj) { 
    for(i=0;i<obj.childNodes.length;i++){
        objNode = obj.childNodes[i];
        for(j=0;j<objNode.childNodes.length;j++){
            if(objNode.childNodes[j].nodeType==1){
                objNode.childNodes[j].style.visibility="hidden";
            }
        }
    }
} 

</script> 
<body> 
<div id="menucontainer"> 
  <div class="menutitle" onmouseover="show_menu(this)" onmouseout="hide_menu(this)"> 
    <div class="relative"> 
      Menu 1 
      <div class="menu"> 
        Item 1<br />Item 2<br />Item 3<br />Item 4 
      </div> 
    </div> 
  </div> 
  <div class="menutitle" onmouseover="show_menu(this)" onmouseout="hide_menu(this)"> 
    <div class="relative"> 
      Menu 2 
      <div class="menu"> 
        Item 1<br />Item 2<br />Item 3<br />Item 4 
      </div> 
    </div> 
  </div> 
  <div class="menutitle" onmouseover="show_menu(this)" onmouseout="hide_menu(this)"> 
    <div class="relative"> 
      Menu 3 
      <div class="menu"> 
        Item 1<br />Item 2<br />Item 3<br />Item 4 
      </div> 
    </div> 
  </div> 
</div> 
</body> 
</html>

laatste vraag

is er een makkelijkere manier door childnodes van childnodes te gaan?

owja ik zat overigens hier:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 
<title>test</title> 
</head>
<style>
body{
  margin: 0px; 
  padding: 0px; 
  height: 100%; 
 }
div{
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#content{
    position:absolute;
    left:200px;
    bottom:20px;
    width:520px;
    height:20xp;
}
div.menu{
    background:#CCC;
    width:120px;
    float:left;
    text-align:center;
}
div.hiddenchild{
    position:absolute;
    bottom:19px;
    border:1px dotted navy;
    background:silver;
    visibility:hidden;
    width:120px;
    text-align:center;
}
</style>
<script>
function showContent(obj){
    for(i=0;i<obj.childNodes.length;i++){
        if(obj.childNodes[i].nodeType==1){
            obj.childNodes[i].style.visibility="visible";
        }
    }
}
function hideContent(obj){
    for(i=0;i<obj.childNodes.length;i++){
        if(obj.childNodes[i].nodeType==1){
            obj.childNodes[i].style.visibility="hidden";
        }
    }
}
</script> 
<body> 
<div id="content">
    <div class="menu" onmouseover="showContent(this);" onmouseout="hideContent(this);">
    menu 1
        <div class="hiddenchild">
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        </div>
    </div>
    
    <div class="menu" onmouseover="showContent(this);" onmouseout="hideContent(this);">
    menu 2
        <div class="hiddenchild">
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        <a href="#">menu item</a><br />
        </div>
    </div>
</div>
</body> 
</html>

voor de mensen die het graag willen weten

[ Voor 69% gewijzigd door disjfa op 30-10-2003 12:07 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 30 oktober 2003 12:11

Acties:

Clay

cookie erbij?

Het kan ook nog met li's en a's en wat css In IE is een klein beetje script nodig, andere browsers die wel fatsoenlijk hover ondersteunen kunnen (en werken) zonder

Deze klapt omlaag, maar het kan net zo makkelijk ook naar boven klappen; ipv een top in de "ul ul" een bottom:0px; en omdat IE zo dom is een height voor de li's, en dan gaat die naar boven ipv naar beneden.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 30 oktober 2003 13:39

Acties:

Pelle

🚴‍♂️

Whoa, dat is wel vet Clay!

donderdag 30 oktober 2003 14:18

Acties:

creative8500

freedom.

Wellicht nog weer beter: combineer menu's uit puur CSS¹ met enkele regels DHTML/JavaScript² en je bent ook klaar. Dan heb je echt nauwelijks JavaScript.

_{1) Eric Meyer's css/edge - [url=]pure CSS menus[/url]

2) { style:phreak; } - pure css branching menu v2}

vrijdag 7 november 2003 17:02

Acties:

Woudloper

« - _ - »

Toevoeging op Clay zijn voorbeeld

Zoals sommige van jullie wellicht al hebben gelezen bij Zeldman is er een nieuwe issue van Alistapart (162) uit met daarin een artikel over li and dropdowns.

Het voorbeeld waaraan Zeldman refereert is overigens mooier qua layout, maar het voorbeeld zoals beschreven op A List Apart is ook erg mooi!