Archief - CSS dropdown menu

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.
s

syndrom

Legacy Member
Yoyo, hier ben ik weer.

ik probeer al heel het weekend een simpel menu te krijgen met drop down effecten als ik over 1 bepaald item hover. Dit lukt me echter niet helemaal niet. Ik kan er wel voor zorgen dat het submenu verschijnt als ik over eender welk item in het hoofdmenu hover maar niet over 1 specifiek iets.

Kzal ff men css en html geven voor het menu

CSS
Code: 
#navcontainer
{
	float: left;
	padding-top: 20px;
}

#navlist
{
	padding-left: 0px;
	list-style: none;
	text-decoration: none;
}

#subnavlist
{
	list-style: none;
	padding-left: 5px;
}

#navlist a
{
	text-decoration: none;
}

#navlist a:hover
{
	color: black;
}

#subnavlist a
{
	color: red;
}

#subnavlist a:hover
{
	color: blue;
}

#subnavlist { display: none; }

#navlist:hover #subnavlist {
	display: block;
}

HTML
Code: 
<div id="navcontainer">
				<ul id="navlist">
					<li><a href="index150.html">Home</a></li>
					<li><a href="150.html">150 Jaar</a></li>
					<li id="deelnemers"><a href="#">Deelnemers</a></li>
						<ul id="subnavlist">
					   		<li><a href="#">Sint-Lucas Beeldende Kunsten</a></li>
					   		<li><a href="#">Sint-Lucas Architectuur (Gent-Brussel)</a></li>
					  		<li><a href="#">Stint-Lucas Academie</a></li>
					   		<li><a href="#">Sint-Lucas Kunsthumaniora</a></li>
					   </ul>
					<li><a href="#">Programmatie</a></li>
					<li><a href="#">Old skool, new class</a></li>
					<li><a href="#">Gallerij</a></li>
				</ul>
		</div>

Met dees kan ik ervoor zorgen dat het verschijnt als ik over een menu item hover, ik wil echter dat het verschijnt alleen als ik over deelnemers hover. Ik heb al geprobeerd met een ID aan deelnemers te geven maar dat lukt niet precies.

enige tips?
-

-BVR-

Legacy Member
Uw HTML structuur is fout. Als ge een 'submenu' wilt maken, dient die ul IN een andere LI te zitten. Dit is juist:

HTML
Code: 
<div id="navcontainer">
    <ul id="navlist">
        <li>
            <a href="index150.html">Home</a>
        </li>
        <li>
            <a href="150.html">150 Jaar</a>
        </li>
        <li id="deelnemers">
            <a href="#">Deelnemers</a>
            <ul id="subnavlist">
                <li>
                    <a href="#">Sint-Lucas Beeldende Kunsten</a>
                </li>
                <li>
                    <a href="#">Sint-Lucas Architectuur (Gent-Brussel)</a>
                </li>
                <li>
                    <a href="#">Stint-Lucas Academie</a>
                </li>
                <li>
                    <a href="#">Sint-Lucas Kunsthumaniora</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Programmatie</a>
        </li>
        <li>
            <a href="#">Old skool, new class</a>
        </li>
        <li>
            <a href="#">Gallerij</a>
        </li>
    </ul>
</div>

Uw css klopte ook niet helemaal: het stelde nl. dat als ge over de UL (en niet over een li-items, maar dus over de hele lijst!) hovert, dat dat item getoond wordt. Dat willen we dus niet. Dit werkt wel:

Code: 
#navcontainer {
    float: left;
    padding - top: 20px;
}

#navlist {
    padding - left: 0px;
    list - style: none;
    text - decoration: none;
}

#subnavlist {
    list - style: none;
    padding - left: 5px;
}

#navlist a {
    text - decoration: none;
}

#navlist a: hover {
    color: black;
}

#subnavlist a {
    color: red;
}

#subnavlist a: hover {
    color: blue;
}

#subnavlist {
    display: none;
}

#navlist li:hover #subnavlist {
    display: block;
}&#8203;

Hier zie je het in werking: Edit this Fiddle - jsFiddle
s

syndrom

Legacy Member
freeza zei:
#deelnemers:hover #subnavlist {
display: block;
}

in plaats van

#navlist:hover #subnavlist {
display: block;
}

denk ik...

als het dat niet is, zul je op volgende link wel je antwoord vinden:
Horizontal Drop Down Menus
Klik om te vergroten...

Jep dat dacht ik ook, maar dat lukt precies niet, dan doet hij helemaal niets. Kzal es je link doorspitten.
s

syndrom

Legacy Member
BramVroy zei:
Uw HTML structuur is fout. Als ge een 'submenu' wilt maken, dient die ul IN een andere LI te zitten. Dit is juist:

HTML
Code: 
<div id="navcontainer">
    <ul id="navlist">
        <li>
            <a href="index150.html">Home</a>
        </li>
        <li>
            <a href="150.html">150 Jaar</a>
        </li>
        <li id="deelnemers">
            <a href="#">Deelnemers</a>
            <ul id="subnavlist">
                <li>
                    <a href="#">Sint-Lucas Beeldende Kunsten</a>
                </li>
                <li>
                    <a href="#">Sint-Lucas Architectuur (Gent-Brussel)</a>
                </li>
                <li>
                    <a href="#">Stint-Lucas Academie</a>
                </li>
                <li>
                    <a href="#">Sint-Lucas Kunsthumaniora</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Programmatie</a>
        </li>
        <li>
            <a href="#">Old skool, new class</a>
        </li>
        <li>
            <a href="#">Gallerij</a>
        </li>
    </ul>
</div>

Uw css klopte ook niet helemaal: het stelde nl. dat als ge over de UL (en niet over een li-items, maar dus over de hele lijst!) hovert, dat dat item getoond wordt. Dat willen we dus niet. Dit werkt wel:

Code: 
#navcontainer {
    float: left;
    padding - top: 20px;
}

#navlist {
    padding - left: 0px;
    list - style: none;
    text - decoration: none;
}

#subnavlist {
    list - style: none;
    padding - left: 5px;
}

#navlist a {
    text - decoration: none;
}

#navlist a: hover {
    color: black;
}

#subnavlist a {
    color: red;
}

#subnavlist a: hover {
    color: blue;
}

#subnavlist {
    display: none;
}

#navlist li:hover #subnavlist {
    display: block;
}&#8203;

Hier zie je het in werking: Edit this Fiddle - jsFiddle
Klik om te vergroten...

ahzo! Merci voor de tips man, heb het ff in cssdesk getest en idd het werkt perfect zoals ik het wou. Echt bedankt voor de tips en de hulp, html/css is allemaar zeer nieuw voor me :d
-

-BVR-

Legacy Member
profound zei:
Waarom js gebruiken als het ook zonder kan?
Klik om te vergroten...

Omdat mét vaak mooier is (hoewel je met css3 tegenwoordig ook veel kan) zonder dat je aan gebruiksvriendelijkheid inboet. Als ik dergelijk menu zou make, zou het ook mét jQuery zijn.
p

profound

Legacy Member
Vinde gij dit echt mooier (drop down menu gewijs)?
the Suckerfish

Nogal wiedes da je meer kan me jquery, ma da was mijn punt hier ni.
R

RobinVdB

Legacy Member
profound zei:
Vinde gij dit echt mooier (drop down menu gewijs)?
the Suckerfish

Nogal wiedes da je meer kan me jquery, ma da was mijn punt hier ni.
Klik om te vergroten...

Das gewoon een slecht voorbeeld. Er zijn ook veel sites die het mooi kunnen verwerken hoor.
-

-BVR-

Legacy Member
profound zei:
Vinde gij dit echt mooier (drop down menu gewijs)?
the Suckerfish

Nogal wiedes da je meer kan me jquery, ma da was mijn punt hier ni.
Klik om te vergroten...

Wat is uw punt dan wel? :p JS gebruiken voor de extraatjes en toch de basisfunctionaliteit behouden kan toch geen kwaad?
p

profound

Legacy Member
Ik had het eigelijk gewoon op het feit da dien suckerfish (waarvan ek de link daar gezet heb) blijkbaar js gebruikt. En dat voor zo'n dropdown menutje js gebruiken toch echt wel overbodig is. :p
Tuurlijk is js handig op een site, ik gebruik in veel sites jquery! Maar als je een alternatief hebt die alleen css gebruikt, kan je toch beter de javascript skippen.
s

silent785

Legacy Member
Ge moet toch wel vervanging voorzien voor de gebruikers die geen javascript hebben.
+ in dit voorbeeld is het vrij nutteloos, kan je evengoed doen met CSS (hovers)
-

-BVR-

Legacy Member
Ja oké, in dat voorbeeld is het inderdaad superbelachelijk. Maar bv: onlangs kwam hier iemand vragen voor een submenu toggle. Dat hebben we dan gefixt met jQuery (toggle + cookies) en als js disabled is, wordt het sub menu gewoon getoond.

Ik ben sowieso al geen fan van de 'hover' om dan elementen te tonen, zo bereik je nooit een publiek dat mobiel/met touch werkt.

Zoals silent zegt, moet je er uiteraard wel altijd voor zorgen dat je een fall-back hebt. Maar js op zich kan ook een fall-back zijn (voor css3 in <ie9/10 bv.) en dat scriptje heeft op zijn beurt nog een fall-back nodig voor mobile devices.
W

W0utR

Legacy Member
Zijn jullie echt nog altijd vastberaden om gebruikers zonder js te helpen?

Elke computer en elk mobile device (alsook tablets) heeft js enabled staan, mensen die dat uitzetten weten wat de gevolgen zijn.
Wij houden daar persoonlijk geen rekening meer mee, alles moet natuurlijk wel werken op oudere brouwers. (IE7, IE8 & IE9).
-

-BVR-

Legacy Member
Ik houd er toch nog rekening mee ja. :) Ik vind gewoon dat het moét werken (basisfunctionaliteit) voor elke gebruiker. En als het te moeilijk is om dat aan te bieden zou ik wel een notice laten verschijnen dat voor het optimale surfplezier ze JS moeten inschakelen.
d

dJeez

Legacy Member
W0utR zei:
Zijn jullie echt nog altijd vastberaden om gebruikers zonder js te helpen?
Klik om te vergroten...
Als je het AnySurfer Plus label wil krijgen moet je wel. Screenreaders (blinden en slechtzienden) en javascript is dikwijls een big no-no. Wij laten de keuze aan de klant. Als er meer werk in kruipt wordt de site uiteraard duurder, en in praktijk wordt quasi enkel bij openbare aanbestedingen gevraagd naar AnySurfer (Plus).
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