Dropdown menu coderen (CSS?)

Dropdown menu coderen (CSS?)

Forum: Scripting en webdesign	Eerste bericht: 19 aug 2011 11:39	Bekeken: 909 x
Op watchlist: 2 x	Laatste bericht: 23 aug 2011 22:57	Posts/dag: 4,0

Vorige | 1 | 2 | Volgende

11 - 18 van 18

Jason K., Particulier

22 aug 2011 00:19

Bedankt voor de reacties. Ik weet zeker dat ik nu een heel stuk verder ben gekomen met een wat nettere opmaak van de CSS (aangezien ik het begin te begrijpen).

Nu zit ik alleen nog met twee dingen:
- Het zwarte bolletje waarvan ik niet weet hoe ik deze moet weghalen (als ik list-style-type: none; plaats laat het geen mouseover menu meer zien).

- Het menu verdwijnt weer als je over de links probeert te gaan. Dit komt waarschijnlijk omdat het mouseover gebied te klein is? Hoe verhelp ik dit?

Zie hier: (Log in om link te zien!)

Edit:
Ben er net achter gekomen dat ik een LI begin zonder daar een UL voor te zetten. Het probleem is echter dat als ik de LI weghaal ik helemaal geen uitklap menu krijg. Kan iemand alsjeblieft helpen? Van een goed werkende code kan ik juist leren...

Met vriendelijke groet,

Jason Koolman

Aangepast op 22-08-2011 00:44 door Jason K.

Post #10

Advertentie

Micropayments via 0900, Premium SMS en iDEAL. Kijk op www.targetpay.com voor de beste uitbetalingen en eenvoudige API!

Jordy M., Particulier

22 aug 2011 09:37

(Log in om link te zien!)

Download een menu, verander m of zet m uit elkaar. Hopelijk krijg je hier inzichten hoe je met :hover en dergelijke pseudonamen kan werken.

Post #11

Jason K., Particulier

22 aug 2011 15:05

Het zit nu toch ook goed? Alleen nog een klein probleempje. Kan ik alleen maar meer van leren dan weer met een heel nieuw menu gaan knutselen.

Post #12

Roy Kroeze, Kroezeweb Webdesign & Hosting

22 aug 2011 17:58

Je moet de LI niet weghalen zoals je aangeeft te hebben gedaan, maar de UL juist toevoegen.

Post #13

Jason K., Particulier

22 aug 2011 18:05

Heb ik ook gedaan, maar toen weer teruggezet omdat het niet werkte. Maar oke ik zal het wel doen zodat je het kunt zien. Er komt dan geen mouseover meer.

Edit:
Als ik tekst in de ahref invoer komt de mouseover wel. Maar dit moet dus vervangen worden door het icoontje alleen lukt me dat niet.

zie: (Log in om link te zien!)

Thanks

Aangepast op 22-08-2011 18:07 door Jason K.

Post #14

Roy Kroeze, Kroezeweb Webdesign & Hosting

22 aug 2011 20:34

Je hebt nu een twee ul-stukken in elkaar genest. De buitenste heeft (voor zover ik kan zien) geen toegevoegde waarde. Die heb ik weggehaald, waarna ik de hover in de CSS heb opgeschoven naar #header_options. Volgens mij moet je nu je css ook nog kunnen verkorten omdat je maar 1 ul-element hebt, en dus een paar CSS-declaraties samen kunt voegen, maar daar heb ik hier geen tijd in gestoken.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>idreamio</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/backgroundlogged.jpg);
background-repeat: repeat-x;
background-position: 50% 0px;
background-color: #D9EEF4;
behavior: url("csshover.htc");
}

#header {
width: 950px;
height: 90px;
margin: 0px auto;
}

#header_left {
background: url(images/logo.png) no-repeat;
width: 250px;
height: 39px;
float: left;
margin: 25px 0px 0px 0px;
}

#header_right {
width: 700px;
height: 32px;
float: right;
margin: 29px 0px 0px 0px;
}

.header_input {
width: 140px;
height: 30px;
border: none;
float: left;
padding-left: 10px;
margin-right: 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-image: url(images/input.jpg);
font-family: Arial;
font-size: 11px;
color: #333;
}

#header_right {
width: 700px;
height: 32px;
float: right;
margin: 29px 0px 0px 0px;
}

.header_input {
width: 140px;
height: 30px;
border: none;
float: left;
padding-left: 10px;
margin-right: 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-image: url(images/input.jpg);
font-family: Arial;
font-size: 11px;
color: #333;
}

#header_options {
position: relative;
float: right;
width: 34px;
height: 32px;
border: none;
margin-right: 3px;
background-image: url(images/icons/options.png);
background-repeat: no-repeat;
background-position: center;
}

#header_options:hover {
background-color: #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#header_options a {
display: block;
width: 35px;
}

#header_options ul {
list-style-type: none;
}

#header_options li {
float: left;
position: relative;
padding: 3px 0;
list-style-type: none;
}

#header_options ul.sub-menu {
display: none;
position: absolute;
top: 20px;
padding: 10px;
z-index: 90;
}

#header_options ul.sub-menu li {
text-align: left;
}

#header_options:hover ul.sub-menu {
display: block;
background-color: #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#header_options:hover ul.sub-menu a {
display: block;
width: 125px;
}

.menulink {
font-family: Arial;
font-size: 11px;
color: #FFF;
text-decoration: none;
}

.menulink:hover {
font-family: Arial;
font-size: 11px;
color: #A0D6E2;
text-decoration: none;
}

.header_logged {
float: right;
margin-right: 10px;
padding: 9px 0px 8px 0px;
font-family: Arial;
font-size: 11px;
color: #FFF;
}

.header_sharedreambutton {
float: right;
border: none;
padding: 9px 14px 10px 14px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #FFCC00;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #333;
}

.header_sharedreambutton:hover {
background-color: #FFE682;
}

</style>
</head>

<body>
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div class="header_sharedreambutton">My dreams</div>

<div class="header_logged">Logged in as <b>Jason Koolman</b></div>
<div id="header_options">
<ul class="sub-menu">
<li><a class="menulink" href="#">Pages</a></li>
<li><a class="menulink" href="#">Archives</a></li>
<li><a class="menulink" href="#">New Posts</a></li>
<li><a class="menulink" href="#">Recent Comments</a></li>
</ul>
</div>
</div>
</div>

</div>
</body>
</html>

Post #15

Jason K., Particulier

22 aug 2011 21:14

Bedankt! Ongelovelijk bedankt. Ik snap inderdaad wat je hebt gedaan. Het enige probleem is dat het menu weggaat als je er met je muis over wilt gaan. Zie: (Log in om link te zien!)

Nu dacht ik zelf dat de oplossing was om een height te geven:

#header_options a {
display: block;
width: 35px;
height: 32px;
}

Maar dan blijft het menu nog steeds weggaan als je met de muis erover wilt gaan. Als ik de top hier verander naar bijvoorbeeld 10pixels blijft het menu wel staan. Zoals hier:

#header_options ul.sub-menu {
display: none;
position: absolute;
top: 10px;
padding: 10px;
z-index: 90;
}

Maar ik wil alleen graag dat het menu er een stukje onder komt. Hoe kan ik dit waarmaken? Nogmaals bedankt!

Aangepast op 22-08-2011 21:14 door Jason K.

Post #16

Roy Kroeze, Kroezeweb Webdesign & Hosting

23 aug 2011 19:11

Eerst moet je begrijpen waarom dit gebeurt. Dat is omdat je het dropdownmenu een position:absolute hebt meegegeven, waardoor de div #header_options niet hoger wordt dan het icoontje. Als je dan langzaam naar het submenu gaat verdwijnt deze weer omdat je dan eventjes met je muis over geen van beide elementen gaat (als je het snel doet, blijft hij wel staan :))

De height van de div #header_options vergroten betekent dat het wel goed gaat, maar dat de knop met het icoontje langer wordt, wat je uiteraard niet wilt.

Mijn eerste ingeving (let wel: ongetest, want voor gratis hulp duurt mij dat te lang) zou zijn om van de knop met het icoontje een afbeelding te maken (dus inclusief donkere achtergrond). Persoonlijk zou ik een sprite maken, dan hoeft bij een mouseover het nieuwe plaatje ook niet meer ingeladen te worden. Voor uitleg over een sprite kun je bij Google terecht.

Als je dat plaatje eenmaal hebt, kun je de height van de div #header_options ongestraft iets groter maken, waardoor je bij het naar beneden bewegen van de muis niet van de div af gaat. Doordat je een afbeelding gebruikt blijft je knop dan het juiste formaat.

Post #17

Jason K., Particulier

23 aug 2011 22:57

Thanks, ik begrijp inderdaad wat je bedoeld. Ik vond die oplossing wel handig maar heb het toch anders aangepakt. Heb namelijk gewoon de top naar 12px verandert, ziet er ook goed uit.

Bedankt voor je hulp! Zonder jou was dit niet gelukt en had ik geld moeten betalen om het gefixt te krijgen. Nu snap ik wat ik fout deed!

Met vriendelijke groet,

Jason Koolman

Aangepast op 23-08-2011 23:25 door Jason K.

Post #18

Vorige | 1 | 2 | Volgende

Opmerking
Dit topic is gesloten omdat er langer dan een maand niet meer in is gepost.
Om toch een bijdrage te leveren aan deze discussie kun je een nieuw onderwerp openen en verwijzen naar deze pagina (http://www.tbforum.com/thread/162048-2.html)

TBForum

Inloggen

Discussies

Vraag en aanbod

Off-topic forums

Opmerking