Archief - horizontaal menu

issith · 10 jul 2012

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.

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;
}

Ik zal ook even de code van de links meegeven waarmee ik momenteel even mee werk.

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>

Doc Oddball · 11 jul 2012

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

Rumor · 11 jul 2012

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;
}

issith · 11 jul 2012

Rumor zei:
Niet noodzakelijk, met enkele lijstjes kan je dit ook bereiken.
De onderstaande code werkt bij mij altijd

Jou code werkt goed, maar ik kan nog steeds geen extra onderverdeling realiseren (vb. items 31 -> 34 op de afbeelding)

de 'webmasters' tab komt niet tevoorschijn

-BVR- · 11 jul 2012

Doc Oddball zei:
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

Slaagt echt nérgens op.

Edit this Fiddle - jsFiddle

HTML code opgekuist:

HTML:

<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>&#8203;

CSS logischer gemaakt:

Code:

#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;
}
&#8203;

Check Algemeen > Nieuws

issith · 11 jul 2012

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)

-BVR- · 11 jul 2012

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)

issith · 11 jul 2012

BramVroy zei:
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)

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.

Archief - horizontaal menu

issith

Legacy Member

Doc Oddball

Legacy Member

Rumor

Legacy Member

issith

Legacy Member

-BVR-

Legacy Member

issith

Legacy Member

-BVR-

Legacy Member

issith

Legacy Member