Archief - CSS : :active behaviour ?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
t

tikketim

Legacy Member
ik heb hier een lijst waar ik nog een andere lijst in heb zitten , zo dus :
PHP: 
<ul>
	<li><a href="#">blabla</a>
		<ul>
			<li>meer bla bla</li>
		</ul>
	</li>
</ul>

ik weet dat het mogelijk is die twede lijst te tonen als je met de muis over <li> gaat maar is dit ook mogelijk te tonen als ik er op heb geklikt ? dus niet met :hover maar met :active

ik heb het al verschillende keren geprobeerd maar het wil niet lukken

grtz Tim
D

DarkBone

Legacy Member
De active state is enkel wanneer de muis is ingeklikt. Dus wanneer je de muisknop weer loslaat is de active state ook ten einde. Ge zult u tot JavaScript moeten wenden.
t

tikketim

Legacy Member
neen javascript is ook geen optie , er zit blijkbaar niks anders op dan alle pagina's apart te maken :)
D

DarkBone

Legacy Member
Ik heb snel iets gemaakt die het probleem demonstreert:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<title>Voorbeeld</title>
		
		<style type="text/css">
		
		ul#nav li
		{
			background-color: #ccc;
			padding: 3px;
		}
		
		ul#nav li:active ul
		{
			display: block;
		}
		
		ul#nav ul
		{
			display: none;
		}
		
		</style>
		
	</head>
	<body>

		<ul id="nav">
		    <li><a href="#">blabla</a>
		        <ul>
		            <li>meer bla bla</li>
		        </ul>
		    </li>
		</ul> 

	</body>
</html>

Ge zult zien dat als je op het grijze deel klikt, het submenu wel zichbaar wordt, maar na het loslaten verdwijnt het weer.

Zie ook online voorbeeld:
http://lode.webcoder.be/menu.html
t

tikketim

Legacy Member
en met javascript is het dan mogelijk het te laten staan nadat ik op de grijze kader heb gedrukt ?
of moet ik dan dat css gedeelte laten vallen en alles met javascript doen ?
Z

Zero Grav

Legacy Member
onclick="document.get.element.by.id

En verder ken ik de syntax zelf niet. :p Maar op die manier kan je er wel voor zorgen dat een item in uw javascript bv een andere positie of display: block krijgt ipv none.
D

DarkBone

Legacy Member
tikketim zei:
en met javascript is het dan mogelijk het te laten staan nadat ik op de grijze kader heb gedrukt ?
of moet ik dan dat css gedeelte laten vallen en alles met javascript doen ?
Klik om te vergroten...

Eigenlijk zul je zo goed als alles met JavaScript moeten doen, enkel opmaaakgedrag kun je wel in je CSS kwijt natuurlijk.

@ ZeroGrav
't is document.getElementById('naam') ;)
D

Dece

Legacy Member
vrij eenvoudig scriptje dat zn werk doet:
Code: 
<script type="text/javascript">

            var menu = new Array();

            function submenu(ulId)
            {
                var elementToOpen = ulId + 'menu';

                if(!menuIsOpen(elementToOpen))
                {
                    //open het menu
                    document.getElementById(elementToOpen).style.display = 'block';

                    //voeg toe aan alle open menus
                    var dump = menu.push(elementToOpen);
                }
                else
                {
                    //sluiten van het menu
                    document.getElementById(elementToOpen).style.display = 'none';

                    //verwijderen uit array
                    verwijder(elementToOpen);
                }
            }

            function menuIsOpen(mId)
            {
                var loops = menu.length;
                var found = false;

                //doorloop array
                for(i=0; i<loops; i++)
                {
                    if(menu[i] == mId)
                    {
                        return found = true
                    }
                }
                //indien hier nog altijd false --> zit er niet in
                return found;
            }

            function verwijder(element)
            {
                var loops = menu.length;
                var temp  = new Array(loops-1);

                for(i=0; i < loops; i++)
                {
                    if (menu[i] != element)
                    {
                        //voeg toe aan onze tijdelijke array
                        var pointer    = temp.length;
                        temp[pointer]  = menu[i];
                    }
                }

                //tijdelijke array = menu array
                menu = temp;
                return true;
            }
            </script>

in u css bestand die geneste ul op display: none; zetten en hem een id meegeven
vb:
Code: 
<ul>
     <li> 
           <a href="#" onclick="submenu('nieuw')">klik</a>
           <ul id="nieuw[b]menu[/b]">
                <li>submenu</li>
           </ul>
     </li>
</ul>
D

DarkBone

Legacy Member
Toch wel...
je moet de spaties in 'display' wegnemen (op twee plaatsen is dat)

En initieel via css je submenu's verbergen, anders lijkt het bij de eerste klik alsof er niks gebeurt.
t

tikketim

Legacy Member
ow die spaties had ik nog niet gezien , nu werkt hij wel
thx allemaal ;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan