1. #1
    issith's Avatar
    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.

    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>
    SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)
    Airrivals
    no votes  

  2. #2
    Doc Oddball's Avatar
    Registered
    24/06/12
    Location
    Edegem
    Posts
    45
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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 : Pawnmaniak
    Zymp: Ik stel voor dat we staken tegen die pedofielen
    no votes  

  3. #3
    Rumor's Avatar
    Registered
    26/03/12
    Location
    Laakdal
    Posts
    4
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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  

  4. #4
    issith's Avatar
    Registered
    03/11/10
    Location
    Mechelen
    Posts
    1,181
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/8
    Quote Originally Posted by Rumor View Post
    This quote is hidden because you are ignoring this member. Show
    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
    SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)
    Airrivals
    no votes  

  5. #5

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Doc Oddball View Post
    This quote is hidden because you are ignoring this member. Show
    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 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>
    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;
    }
    ​
    Check Algemeen > Nieuws
    no votes  

  6. #6
    issith's Avatar
    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)
    Airrivals
    no votes  

  7. #7

    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  

  8. #8
    issith's Avatar
    Registered
    03/11/10
    Location
    Mechelen
    Posts
    1,181
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/8
    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    SteamID: issith | PSN: Lssith (eerste letter is een 'l' van Lima)
    Airrivals
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in