submenu's spry menu openen achter APdiv

Status
Niet open voor verdere reacties.

RoBro1

Nieuwe gebruiker
Lid geworden
16 jul 2013
Berichten
2
Beste allen,

Ik ben al een hele tijd bezig om mijn spry submenu's zichtbaar te laten maken. Ík heb verschillende forums bekeken en hierdoor ook aanpassingen aangebracht in mijn bestanden. Zoals je zult verwachten zonder resultaat.

hieronder de css van mijn div, met editable region.

PHP:
#inhoud {
	position:absolute;
	left:375px;
	top:126px;
	width:585px;
	height:474px;
	background-color:#FFF;
	layer-background-color:#FFF;
	border:1px none #000000;
	z-index:8;
	wmode:transparant; Heb ik ergens op de site van adobe gelezen, heeft niets uitgemaakt.

hieronder de sprymenubarhorizontal.css
[
PHP:
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 70%;
	cursor: default;
	height: 25px;

}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
ul.MenuBarActive
{
	z-index: 1000;
	
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0 10;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: auto;
	height: 25px;
	float: left;
	z-index: 0;
	
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	height: 25px;
	position: absolute;
	left: -1000em;
	
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
	height: 25px;
	background: #666;
	visibility: visible

}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 8.2em;
	color: #333;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
	
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
	background: #666;
	
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
	
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color: #333;
	text-decoration: none;
	text-align: center;
	width: auto;
	float: none;
	height: 25px;
	padding: 10px 10px 0px;
	background: #666;

}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	text-decoration: underline;
	background: #CCC;
	width: auto;
	height: 25px;
	
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #000;
	text-decoration: underline;
	background: #CCC;
	
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background: #666 url(SpryMenuBarDown.gif) no-repeat 95% 50%;
	
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	height: 25px;
	padding: 0px;
	
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background: #CCC url(SpryMenuBarDownHover.gif) no-repeat 95% 50%;
	
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	height: 25px;
	
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}

Het is een hele lap tekst maar ik hoop dat iemand mij kan helpen!!
Alvast bedankt!
 
Laatst bewerkt door een moderator:
zou dit ff anders neer willen zetten gewoon met php tag er omheen
ziet er wat beter uit
 
op verzoek aangepast.
 
eerste gedeelte regel 11 wmode:transparant; Heb ik ergens op de site van adobe gelezen, heeft niets uitgemaakt.
regel 12 daar van afsluiter

zie ook geregeld procenten niet beter om px te gebruiken
zou handig zij om te weten waar de demo staat om te kijken of de html code of verdere uitwerking
 
Code:
 wmode:transparant; Heb ik ergens op de site van adobe gelezen, heeft niets uitgemaakt.
wmode:transparent is iets van Flash, dat heeft hier dus niets mee te maken en kun je weglaten. oals Ciske al opmerkte heb je dat CSS blok niet afgesloten. layer-background-color kwam me ook niet bekend voor maar even googelen leert dat dat alleen door Netscape werd ondersteund. Aangezien Netscape door niemand meer gebruikt wordt kun je die regel ook beter weglaten. Veder kan ik er in elk geval weinig van zeggen zonder de site te zien.
 
Hallo alvast ontzettend bedankt voor alle feedback.
De site staat helaas nog niet online. Wat is dan de beste oplossing?
 
Laatst bewerkt door een moderator:
drop down menu

een drop downmenu

PHP:
<nav>

	<ul>
		<li><a target="_parent" href="index.php">home</a></li>
		<li><a target="_parent" href="afspraak1.php">Afspraken</a></li>
		<li><a target="_parent" href="afspraak2.php">afspraak2</a></li>
		<li><a href="#">kolom 2</a>
			<ul>
				<li><a class = "sub" href="kolom.php">kolom</a></li>
				<li><a class = "sub" href="archief2.php">kolom</a></li>
			</ul>
		</li>
                <li><a target="_parent" href="planning.php">kolom3</a></li>
		<li><a href="#">Beheerpaneel</a>
			<ul>
				<li><a class = "sub" href="beheerwerknemers.php">Nieuwe medewerker</a></li>
				<li><a class = "sub" href="werknemertijden.php">Werktijden medewerker</a></li>
				<li><a class = "sub" href="nieuwe_gebruiker.php">Nieuwe gebruiker</a></li>
                <li><a class = "sub" href="nieuwe_functie.php">Nieuwe functie</a></li>
			</ul>
		</li>
         <li><a href="telefoon.php">Telefoon</a></li>
        <li><a href="loguit.php">Log uit</a></li>
	</ul>
	


	
</nav>

pak een leeg blad kopier dit hier in

PHP:
nav {
width: 100%;
position: absolute;
top: 130px;
background-image: url(../images/menu-bar.png);
border-top: 1px solid #fff;
font-size: 12px;
}

nav ul {
margin: 0;
padding: 0;
line-height: 30px;
}

nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background-image: url(../images/menu-bar.png);
}

nav ul li a {
text-align: center;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
height: 30px;
width: 130px;
display: block;
color: white;
margin-top: 5px;
margin-bottom: 5px;
}

nav ul ul {
position: absolute;
display: none;
top: 30px;
}

nav ul li:hover ul {
display: block;
}

nav li:hover {
background-color: gray;
}

sla dit in nieuwe map gemaand css makkelijk op terug te vinden
sla dat bestandje op als style.css


kopier dit in leeg bestan sla dit op als menu.php

pak een leeg blad
PHP:
<head>

<link href = "css/style.css" rel="stylesheet" type="text/css">

</head>

<?php
include 'menu.php';
?>
sla deze pagina op als zijnde index.php gooi het online
en je zult een menu hebben

toppie toch
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan