Thread: horizontaal menu
-
10-07-2012, 23:47 #1Member
- Registered
- 03/11/10
- Location
- Mechelen
- Posts
- 1,181
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
horizontaal menu
hallo allemaal,
ik ben de website van mijn studentenclub aan het updaten omdat die nogal oud is.
De layout is al in orde, maar mijn menu wil maar niet lukken.
Ik ben een beginner met wat zelfstudie kennis. Het enige waar ik mee 'omweg' kan is dan ook xhtml en css.
Ik heb een horizontale menubalk
iets lijkend op dit.
Ik zou iets willen realiseren zoals dit
Ik wil dus een extra niveau. Ik heb al veel websites afgegaan en al hun voorbeelden al geprobeerd maar het gaat altijd verkeerd.
Ik ben nu geëindigd met een megaslordige code die wel zijn ding doet.
Kunnen jullie mij helpen om het extra niveau te maken? Ik raak niet echt verder omdat ik eigenlijk niet weet wat ik aan het doen ben.
Ik ben echt wel een beginneling dus ik kan mogelijk domme vragen stellen.
Ik zal ook even de code van de links meegeven waarmee ik momenteel even mee werk.Code:#menu { width: 1000px; height:30px; position: static; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align:center; background-image:url(afbeeldingen/menu.jpg) } /* Menu items*/ #nav, #nav ul { padding: 0px 0 0 0; margin: 0; list-style: none; text-align:center; } #nav li { position:relative; width: 200px; line-height:30px; display:inline; } #nav ul { position: absolute; width: 120px; visibility:hidden; } #nav li ul:hover ul li ul li{ position: static; width: auto; visibility:visible; } #nav li:hover ul, #nav li.ie_does_hover ul { left: auto; background-position: 0 0; color:#F8C400; visibility:visible; } #nav a { display:inline-block; padding:0px 20px 0px 20px; margin: 0px 0px 0px 0px; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } #nav ul li{ display:block; } #nav li:hover a { text-decoration:none; background-image: url(afbeeldingen/#); background-color:#999999; } #nav li:hover ul{ left:0; } #nav li:hover ul a{ text-decoration:none; background:none; } ul a{ font-weight: bold; cursor: default; } ul ul a:link, ul ul a:visited{ font-weight: normal; color: #CCCCCC; cursor: pointer; } ul li a:hover, ul li a:active{ font-weight: bold; color: #F8C400; cursor: pointer; } ul ul li{ background-color: #666; border-top: 0px solid #FFF; border-left: 0; }
Code:<div id="menu"> <ul id="nav"> <li><a href="#">Algemeen</a> <ul> <li><a href="#">Welkom</a></li> <li><a href="#">Statuten</a></li> <li><a href="#">Nieuws</a></li> <li><a href="#">Praesidia</a></li> <ul> <li><a href="#">webmasters</a></li> </ul> <li><a href="#">Sponsors</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Links</a></li> </ul> </li> <li><a href="#">Activiteiten</a> <ul> <li><a href="#">Kalender</a></li> <li><a href="#">Foto's</a></li> </ul> </li> <li><a href="#">Events</a> <ul> <li><a href="#">Revue</a></li> </ul> </li> <li><a href="#">Forum</a> </li> <li><a href="#">Contact</a> </li> </ul> <!--End Menu--></div>SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)Airrivalsno votes
-
-
11-07-2012, 12:55 #2
zul je een hele-hoop Divs moeten maken , voor elke optie dat er is zal je nog een menu(div) moeten maken
EDIT : gebruik PHP , is veel gemakkelijker om met Divs te werken__________________________________________________Steam : PawnmaniakZymp: Ik stel voor dat we staken tegen die pedofielenno votes
-
11-07-2012, 14:43 #3
Niet noodzakelijk, met enkele lijstjes kan je dit ook bereiken.
De onderstaande code werkt bij mij altijd
Code:<div id="menu"> <ul id="nav"> <li><a href="#">Algemeen</a> <ul> <li><a href="#">Welkom</a></li> <li><a href="#">Statuten</a></li> <li><a href="#">Nieuws</a></li> <li><a href="#">Praesidia</a> <ul> <li><a href="#">Webmasters</a></li> </ul> </li> <li><a href="#">Sponsors</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Links</a></li> </ul> </li> <li><a href="#">Activiteiten</a> <ul> <li><a href="#">Kalender</a></li> <li><a href="#">Foto's</a></li> </ul> </li> <li><a href="#">Events</a> <ul> <li><a href="#">Revue</a></li> </ul> </li> </ul> </div>Code:#menu { width: 1000px; height: 30px; font-size: 14px; font-family: Verdana, Arial; text-align: center; background: url('afbeeldingen/menu.jpg'); } #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } #nav a{ display:block; padding:0px 5px; font-size: 14px; text-decoration:none; color: #FFF; width: 200px; } #nav a:hover{ background-color:#fff; color:#333; width: 200px; } #nav li{ float:left; position:relative; width: 200px; background: #2D2D2D; } #nav ul { position:absolute; display:none; top:1.5em; } #nav li ul a{ height:auto; float:left; width: 200px; padding-top: 5px; padding-bottom: 5px; } #nav ul ul{ top:auto; } #nav li ul ul { margin:0px 0 0 200px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }no votes
-
11-07-2012, 17:10 #4Member
- Registered
- 03/11/10
- Location
- Mechelen
- Posts
- 1,181
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)Airrivalsno votes
-
11-07-2012, 17:47 #5Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Slaagt echt nérgens op.
Edit this Fiddle - jsFiddle
HTML code opgekuist:
CSS logischer gemaakt:HTML Code:<div id="menu"> <ul id="nav"> <li><a href="#">Algemeen</a> <ul> <li><a href="#">Welkom</a></li> <li><a href="#">Statuten</a></li> <li><a href="#">Nieuws</a> <ul> <li><a href="#">Nieuwsitem 1</a></li> <li><a href="#">Nieuwsitem 2</a></li> <li><a href="#">Nieuwsitem 2</a></li> </ul> </li> <li><a href="#">Praesidia</a></li> </ul> </li> <li><a href="#">webmasters</a> <ul> <li><a href="#">Sponsors</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Links</a></li> </ul> </li> <li><a href="#">Activiteiten</a> <ul> <li><a href="#">Kalender</a></li> <li><a href="#">Foto's</a></li> </ul> </li> <li><a href="#">Events</a> <ul> <li><a href="#">Revue</a></li> </ul> </li> <li><a href="#">Forum</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Check Algemeen > NieuwsCode:#menu { width: 1000px; height: 30px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; } /* Menu items*/ ul#nav { padding: 0; margin: 0; list-style: none; text-align: center; } ul#nav > li { position:relative; width: 200px; line-height:30px; display: inline; } ul#nav > li ul { position: absolute; width: 130px; display: none; } ul#nav > li > ul > li > ul { width: 200px; } ul#nav > li:hover > ul, ul#nav > li > ul > li:hover > ul { color: #F8C400; display: block; } ul#nav > li > ul > li:hover > ul { margin-left: 90px; margin-top: -50px; } #nav a { display: inline-block; padding:0 20px; margin: 0; text-decoration: none; } ul#nav li> > ul > li { display: block; } ul#nav > li:hover a { text-decoration: none; background-color:#999; } ul#nav > li:hover > ul > li > a { text-decoration:none; background: none; } a:link, a:visited{ font-weight: normal; color: #CCCCCC; } a:hover, a:active{ font-weight: bold; color: #F8C400; } ul#nav > li > ul { background-color: #666; border-top: 0px solid #FFF; border-left: 0; } no votes
-
11-07-2012, 18:01 #6Member
- Registered
- 03/11/10
- Location
- Mechelen
- Posts
- 1,181
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
bedankt ik heb je code geprobeerd, het werkt allemaal ok, maar mijn dropdown verschijnt helemaal links en ik kan er niet op klikken omdat de dropdown verdwijnt als ik erover wil gaan.
Bedank voor die website te delen.
Edit this Fiddle - jsFiddle
Dit is dus wat ik nu heb. ALs ik over 'Praesidia' (onder Algemeen) ga met mijn muis zou ik dus graag willen dat 'webmasters', rechts naast 'Praesidia' te voorschijn komt. (De kleurtjes maken niets uit, het is gewoon zo voor mij zodat ik kan onderscheiden welke code wat doet)SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)Airrivalsno votes
-
11-07-2012, 18:31 #7Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Edit this Fiddle - jsFiddle
HTML en CSS aangepast. Niet helemaal opnieuw omdat ge blijkbaar toch vindt dat uwe CSS beter is... Ehum. Het is overduidelijk dat ge maar wat dingen copypastet en het zo probeert te doen werken. Ik zeg het u al: ge gaat u dat beklagen. Ge kunt beter op uzelf eerst wat kleine dingen proberen (hoe maak ik een degelijk menu, hoe float ik dingen, hoe clear ik dingen, hoe structureer ik mijn website tegoei. Basis CSS, basis HTML etc. En begin niet direct aan een groot project. Mijn mening hé. (en ik ben ook een self-taught)no votes
-
11-07-2012, 18:47 #8Member
- Registered
- 03/11/10
- Location
- Mechelen
- Posts
- 1,181
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
oh nee, ik vond hem helemaal niet beter. Ik liet gewoon zien wat ik had, zodat andere mensen het niet telkens in Dreamweaver of andere dergelijke programma's moet laden.
Ge hebt helemaal gelijk, ik heb veel zitten copy-pasten bij het menu.
Onze website is gewoon heel erg lelijk
en ik niemand nam ooit initiatief om er iets aan te doen.
Ik ben te weten gekomen dat onze webmaster gewoon de oude website van zijn ouders had overgenomen, dus veel hulp ging ik waarschijnlijk niet krijgen. We hebben wel veel handige scripts lopen op de website, maar de persoon die dat heeft gedaan heeft volgens hem geen kennis van website lay-outs.
Ik moet het dus zelf doen
Ik had ook iemand kunnen betalen, maar ik doe het liever zelf want dan leer ik nog eens iets.4
EDIT:
Bedankt de code werkt echt goed, enkel moet ik nog uitvissen hoe die 'dropdown' onder het menuitem kan laten verschijnen.SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)Airrivalsno votes

