1 dropdown in een bestaand menu maken

[Merijnbosma]

Hallo,

ik heb een site die goed functioneert en ook al vol zit met css maar nu wil ik graag een één dropdown in het bestaande menu maken zonder alles overhoop te gooien.

Is dit mogelijk of is een nieuw menu maken makkelijker?

Grtz Merijn

www.transportarchief.nl

 

[dannywillem]

Hallo,

Je kan voor een dropdown gewoon je bestaande menu gebruiken . Kijk hier maar is naar http://javascript-array.com/scripts/simple_drop_down_menu/ .

 

[Merijnbosma]

Hey Dannywillem,

Deze had ik al gevonden maar ik raak in de knop met de bestaande css en de css van het dropdown menu (dat doe ik trouwens bij allen menus die ik heb geprobeerd.

Hoe los ik dit op?


Ik ben wat aan het knoeien geslagen maar css is niet mijn sterkste punt, ik krijg een aantal dingen niet goed.

- de positie van het originele menu hangt nu links
- het "hoofd" van het dropdown menu blijft rechts hangen en de rest links ook als ik in de html de volgorde verander
- het dropdownmenu zelf zit bij lange na niet onder het "hoofd"
- de kleur van de links blijft paars

www.transportarchief.nl/index1.php

 

[dannywillem]

Hallo Merijn,

Ik zal vanavond even een voorbeeld maken .

Gr.

Danny

 

[dannywillem]

Hier heb ik wat voor u . Hopelijk werkt dit voor u.

Dit moet je in de css file doen:

#topnav div {
position: absolute;
visibility: hidden;
margin: 0;
padding:0 0 8px 0;
border: 1px solid #5970B2;
z-index: 30}

#topnav div a
{ position: relative;
display: block;
margin: 0;
padding:0 0 8px 0;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
font: 11px arial}

#topnav div a:hover
{ color: #FFF}

#topnav
{ margin: 0;
padding:0 0 8px 0;}


#topnav li
{ list-style: none;
float: left}

#topnav li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
text-decoration: none}

Dit moet je in je index voor menu dropdown

<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Mappen</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="map1.html">Map 1</a>
<a href="#">Map 2</a>
<a href="#">Map 3</a>
<a href="#">Map 4</a>
<a href="#">Map 5</a>
<a href="#">Map 6</a>
</div>
</li>

En als laatst moet je ook de javascript in je index hebben:

<script language="JavaScript" type="text/javascript">
// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>

Het menu gaat nog steeds naar links, maar nu minder erg.

Veel succes ermee

 

[csshunter]

Hoi Merijn,
Ik ben ook even aan het knutselen geslagen.
Waar ik op uit kom:

• Het dropdown-menu hoeft helemaal niet via een javascript te lopen.
• Het kan gewoon een css-dropdown worden, waarin het submenu opgenomen zit als nieuwe lijst <ul> binnen het item "Mappen" in het hoofdmenu.
• De positie van het totaal van het menu kan dan met css aan de rechterkant blijven, en de uitklapper wordt met css in stelling gebracht onder het item waar het rijtje bij hoort.

Dat gaat als volgt:

...
	<div id="topnav">
		<ul id="sddm">
			<li class="active"><a href="index.php">Home</a></li>
			<li><a class='iframe' rel="news" href="news.html">Nieuws</a></li>
			<li id="mappen"><a href="#">Mappen</a>
				<ul>
					<li><a href="map1.html">Map 1</a></li>
					<li><a href="map2.html">Map 2</a></li>
					<li><a href="map3.html">Map 3</a></li>
					<li><a href="map4.html">Map 4</a></li>
					<li><a href="map5.html">Map 5</a></li>
					<li><a href="map6.html">Map 6</a></li>
				</ul>
			</li>
			<li><a class='iframe' rel="x" href="images/onbekend">X-Files</a></li>
			<li><a href="aangeleverd.html">Aanleveren</a></li>
		</ul>
	</div>
...

Met als bijbehorende css:

#header #topnav {
	width: auto; /* of de width:650px verwijderen */
	}

/* aanvullende styles: */

#sddm li {
	position: relative;
	}
#sddm li#mappen a:hover {
	border-bottom-style: dotted;
	}
#sddm ul {
	position: absolute;
	left: 0;
	margin-left: -9999px; /* onzichtbaar */
	padding-top: 7px;
	padding-bottom: 7px;
	background: #232323;
	}
#sddm li:hover ul {
	margin-left: -.8em; /* zichtbaar */
	}
#sddm ul li {
	clear: left;
	width: 5em;
	margin-right: 0;
	padding: 0 .5em;
	}
#sddm ul li a {
	display: block;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	border: 1px solid #232323; /* onzichtbaar gemaakt met background-color */
	}
#sddm li#mappen li a:hover {
	border-top: 1px solid #E8DCCC !important;
	border: 1px solid #E8DCCC !important;
	}
#header {
	position: relative;
	z-index: 2;
	}
#latest {
	position: relative;
	z-index: 1;
	}

En de proef op de som:

• bliksekaters.nl/tests/css-dropdown-ta.htm

Met vriendelijke groet,
CSShunter
___________
PS: Heb je er al eens aan gedacht om van het menu een php-include te maken? Dan hoeft bij een verandering in het menu de verandering maar één keer geüpload te worden, en staat het meteen goed op alle pagina's.

 

[Merijnbosma]

Hey jongens,

@ Dannywillem

Ik ben toch bang dat het weer een gevalletje is van csshunter to the rescue, toch heel erg bedankt voor de moeite :thumb:

@ Csshunter

Het werkt weer perfect zoals altijd

Daar heb ik idd al wel aan gedacht probleem is mijn totale onkunde in php en alles wat er te weten valt over php te weten valt, weet ik niet
Ik heb wel converters gevonden html > php maar is dat wel zo betrouwbaar en cross-browser vroeg ik me direct af (niet dat ik genoeg kennis heb om zelf een site cross-browser te maken maar ik verwacht het wel van een converter)

En hoe zit dat dan met de css? Blijft die gewoon in de layout.css of verhuisd die mee naar het php bestand?




Grtz Merijn

 

[TJansen]

De css wordt op elke pagina aangeroepen en voor zo'n include met php werkt het eigenlijk hetzelfde.

Je zal dan wel op elke pagina bijvoorbeeld

<?php include("hoofdmenu.php"); ?>

moeten plaatsen op de plaats waar het menu moet komen.

 

[Merijnbosma]

Thnx :thumb:

php is invoegen is gelukt.

 

[Merijnbosma]

Zie ik het volgende probleem en dat is het class="active" gedeelte in het menu staat nu altijd de home knop op actief.

Simpel is natuurlijk het active gedeelte weghalen maar mooier is natuurlijk als het werkt mits dat mogelijk is natuurlijk

Grtz en goed weekend alvast

ps het map menu is een stuk smaller ineens, ik ben ergens in het proces twee stukjes verloren haha geen idee hoe en wat dat is gekomen, heb alle dingen wat ik kon bedenken geprobeerd maar ik denk dat er ergens iets overschreven wordt ofzo