Inschuivend menu

[Verwijderd]

Heej!

Een vraagje, ik wil voor een nieuwe website, inschuivende menu's gebruiken zoals op onderstaand screenshot (geleend van _Graphix). Alleen vraag ik me af hoe dat te maken. D.m.v. een mouseOver, of met javascript.. Ik heb al geprobeerd met mouseovers, maar dan krijg ik de links er niet in. Misschien kan iemand me helpen?



Bij voorbaat dank!

Jeroen!

[André]

Op het zichtbare gedeelte zet je een mouseover die naar een javascript funtie verwijst. In die funtie laat je het menu naa binnen schuiven

[Verwijderd]

Ik ben geen held in javascript.. heb je misschien een tutorial o.i.d. (en zou he took lukken als ik op de linkerbutten een mouseover plaats naar een kale butten (met zelfde background als de cel met links) en een rechterbutton met ook een mouseover? en die naar elkaar verwijs?

[André]

Mjah, hier zijn niet echt tutorials over. Kijk eens op www.hotscripts.com voor wat voorbeelden. We gaan geen kant-en-klare oplossing geven want dan zou het een scriptrequest worden

[Verwijderd]

André schreef op maandag 07 november 2005 @ 17:53:
Mjah, hier zijn niet echt tutorials over. Kijk eens op www.hotscripts.com voor wat voorbeelden. We gaan geen kant-en-klare oplossing geven want dan zou het een scriptrequest worden

Weet ik, wil ik ook nie.. wil ut zelf leren maar in ieder geval bedankt! k ga knutselen

[RM-rf]

Je moet hier soewieso javascript voor gebruiken, de 'onmouseover' is een eventhandelr die dan een bepaalde javascript-functie oproept:
in die functie moet je dus de positioneringswaarde (left) van een absoluut gepositioneerde DIV, en misschien een display propertie aanpassen:

code:

<style type="text/css">
#menuShowcase {
   position: absolute; 
   left: 0; top: 25px;
}</style>

<script type="text/javascript">
var myInterval ;
function show( elm ) {
   myInterval = setInterval("showMe( '"+elm+"')", 100);
}
function showMe( elm ) {
   elm = document.getElementById
   left = elm.posLeft
   if (posleft < 100 ) {
      newleft = left+5
      elm.style.left = newleft
   } else {
       clearInterval( myInterval  )
   } 
}
<7script>

<ul  id="menuShowcase"> 
   <li> <a href="webdesign.html">Webdesign</a></a>
   <li> <a href="print.html">Print</a></a>
<ul>

<button onmouseover="show( 'menushowcase' )" />

onmouseout moet ej een soortgelijke functie aanroepen, die dan het menuutje weer terugzet ... of je past de bestaande functie een beetje aan dat je er een + of - waarde aan kan doorgeven, of een boolean

ik zou je overigens sterk afraden dat bij een onmouseover/mouseout te doen, dat kan voor gebruikers enorm irriterend zijn, als interface elementen enkel bij het bewegen van hun muis al gaan in- of uitklapen ... normaal is het beter om te wachten met in- en uitklapenn op een click, en bij mouseover enkel een 'signaal te geven, bv een oplichten van een knop, om aan te geven dat je er op kan klikken

[Verwijderd]

ik kan je het stukje code wel geven, je kan het ook zelf wel rippen, als je op mijn website kijkt

het werkt inprincipe gewoon zonder javascript (puur css) alleen omdat IE alleen :hover op a elementen kan gebruiken maak ik ook nog gebruik van onmouseover/onmouseout

[Verwijderd]

Verwijderd schreef op maandag 07 november 2005 @ 18:50:
ik kan je het stukje code wel geven, je kan het ook zelf wel rippen, als je op mijn website kijkt

het werkt inprincipe gewoon zonder javascript (puur css) alleen omdat IE alleen :hover op a elementen kan gebruiken maak ik ook nog gebruik van onmouseover/onmouseout

Ik heb net geprobeerd hem te rippen maar dat lukt niet Als je hem via deze weg zou willen geven, super bedankt!

[Verwijderd]

Verwijderd schreef op maandag 07 november 2005 @ 19:06:
[...]


Ik heb net geprobeerd hem te rippen maar dat lukt niet Als je hem via deze weg zou willen geven, super bedankt!

dit is de html die je nodig hebt

HTML:

    <ul id="menu">
        <li onmouseover="this.className='hover';" onmouseout="this.className='';">
            <a href="#" class="showcase"></a>
            <div>
                hier komt de text van het uitklapbare menutje
            </div>
        </li>
    </ul>

en de bijbehorende css

Cascading Stylesheet:

#menu li div {
    position: absolute;
    top: 213px;;
    display: none;
    width: 30px;
    height: 128px;
    float: left;
    z-index: 100;
    cursor: pointer;
}
#menu li:hover div, #menu li.hover div {
    display: block;
    width: 200px;
    background: #242424
    url("images/showcaseHover.jpg")
    no-repeat
    right;
}

lijkt me vrij duidelijk hoe dit in elkaar steekt suc6 ermee

[ Voor 35% gewijzigd door Verwijderd op 07-11-2005 22:28 ]

[crisp]

Volgens mij zoekt de TS meer iets dat echt 'uitschuift', net als de update tracker hier rechtsboven...

[Verwijderd]

mja dat zou je n javascript functie moeten maken die ervoor zorgt dat de div naar rechts schuift, hierover valt genoeg te vinden op internet dacht ik zo.

[Verwijderd]

@crisp, dat zou nog mooier zijn. Maar met de html & css van _Graphix lukt het me ook wel!

hartelijk dank mensen!