Roldown Menu

[Ladyke]

hoi,
ik heb een bestaande website , nu wil ik in de menu balk vanboven iets extra toevoegen.
deze website is voor onze jeugdbeweging dus ik wil een pagina meken voor uitnodigingen en verslagen van activiteiten , maar weet niet goed hoe mijn code aan te passen.
dus als je over de tab activiteiten komt dat er dan een balkje naar beneden springt met uitnodingingen en daaronder verslagen (dit hoeft niet te fancy zijn)
maar ik zou wel graag dezelfde kleuren willen behouden

dit is nu mijn code :

CSS deel :

div.menu{
position:relative;
margin-left:26%;
}
#navmenu ul { margin-left:-11%; margin-top:0%; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li { display: inline; }
#navmenu ul li a { text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: #FFFFFF;
	background: #009900;}
#navmenu ul li a:hover { color: red;
	background: #FFFF00; }
-->

HTML deel :

<div class="menu">
<div id="navmenu">
<ul>
 <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1.htm">Home</a></li>
 <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Foto's].htm">Foto's</a></li>
  <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Activiteiten].htm">Activiteiten</a></li>
	<li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Plusserlied].htm">Plusserlied</a></li>
	 <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Leiding].htm">Leiding</a></li>
	  <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Plan].htm">Plan</a></li>
		 <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Links].htm">Links</a></li>
		<li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Links].htm">FAQ's</a></li>
	  <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Contact].htm">Contact</a></li>
</div>
</div>

Kan iemand me hier mee helpen ?

 

[csshunter]

Je zou deze eens kunnen proberen:

• accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Na het invullen van de menu-items en de submenu-items, en een keus uit een paar styles, komt de html en css vanzelf tevoorschijn.

 

[Ladyke]

dat is het niet, ik wil mijn items behouden .
kan je in mijn code geen extrau <ul> aanmaken ? dit is wat ik niet snap
hoe moet ik mijn code aanpassen zodat er 2 balkjes tevoorschijn springen in mijn menu ?

 

[csshunter]

Hoi Ladyke,
Als je braaf je gegevens invult in de List-O-Matic, komt er de nodige html en css uitrollen.
Dat is dan het werk-model van het menu, dat nog verder aan je eigen opmaak aangepast moet worden:

<ul id="main-nav">
   <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1.htm">Home</a></li>
   <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Foto's].htm">Foto's</a></li>
   <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Activiteiten].htm">Activiteiten</a>
      <ul>
         <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Uitnodigingen].htm">Uitnodigingen</a></li>
         <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Verslagen].htm">Verslagen</a></li>
      </ul>
   </li>
   <li><a href="http://plussersherentals.webs.com/Beta/Plussers%202.1%20[Plusserlied].htm">Plusserlied</a></li>
</ul>

ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0;width:9em;}
ul#main-nav li a {text-decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border-left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border-left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}

Na inplakken op de pagina komt er dit uit de bus:

• Resultaat List-O-Matic: plussersh-nw-2.htm.
  Zie broncode.
  De laatste links heb ik niet allemaal ingevuld omdat het om de Activiteiten-link gaat, die uitgeklapt moet worden.

Ga je met de muis over de Activiteiten, dan klappen de "Uitnodigingen" en de "Verslagen" er onder uit.
Wat nog moet gebeuren: de kleuren kloppen niet, de positie klopt niet, er komen zwarte randjes bij een hover, en door het uitklappen gaat de rest naar beneden.
Maar dat kan met aanpassing van de css rechtgezet worden!

Het tegenhouden van het naar beneden opschuiven kan gedaan worden door de <ul> van het menu een absolute positie te geven.
De <div id="navmenu"> kan er tussen uit, want de menu-<ul> heeft nu zelf een id gekregen.
De borders van het List-O-Matic voorbeeld zijn niet nodig, en de linkkleur + hoverkleur zijn gauw aangepast.
Dan kan het bv. zoiets worden:

• Resultaat bijwerken: plussersh-nw-3.htm.

Met vriendelijke groet,
CSShunter

 

[Ladyke]

jippie hij werkt ,
sorry blijkbaar had ik die list o matic niet goed door :shocked:
ik heb zijn positie nog een klein beetje aangepast :thumb:
echt super bedankt :d spijtig dat helpmij geen punten systeem heeft .

nog een vraagje : wat is dit deeltje op de code ?

<script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script>
<script type="text/javascript">
	if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}
</script>

echt super bedankt
Ladyke

 

[Ladyke]

*edit ,
zoals die eerste pagina dat jij laat tonen waar de tekst aar onder springt . daar heb jij position absolute aan gegeven he ?
kan ik dit ook doen bij een css rollover ? want als ik er 2 naast elkaar zet en erover kom dan sprongen die andere ook opzij . is dit op te lossen met "absolute" ?

Nog eens bedankt Ladyke

 

[csshunter]

Beide scripts zullen er automatisch door webs.com in worden gezet:

• Het escort.js is een script dat weer een ander javascript oproept, dat zorgt voor het plaatsen van de advertentiebalk helemaal onderaan de pagina.
• Het urchin-script is een script dat voor webs.com de statistiek-analyse van het klikgedrag van de bezoekers bijhoudt (zie hier).

{position: absolute;}
Ja, die kan ook bij css-rollovers gebruikt worden.
Met de {position: absolute;} is het wel uitkijken: het heet absoluut, maar dat betekent "absoluut ten opzichte van de positie van het laatste element met een {position: relative;}, dat je hoger in de cascade tegenkomt."
Absoluut is dus ook een soort relatief!

 

[Ladyke]

csshunter, ik ben eiggenlijk benieuwd hoe je de rest van de code wist , die heb je wss uit een van de andere topics gehaalt van me onder css

 

[csshunter]

Nee hoor, zo ver hoefde ik niet te gaan: ik hoefde alleen uit de html-code van je startvraag hierboven de link naar "Home" in de adresbalk van de browser te plakken.

 

[Ladyke]

owjha juist