Menu Wordpress (submenu items)

Status
Niet open voor verdere reacties.

jacobboersma

Gebruiker
Lid geworden
11 sep 2007
Berichten
428
Ik krijg op mijn site de submenuitems niet goed. Op www.manegecaprilli.nl/wordpress staat bijvoorbeeld bij menu(in dashboard) kantinediensten onder info. In het menu staat het er als een gewoon menu item. Wat is het probleem?

header.php
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
  <body>

<div id="logo">

<P><?php if (is_single() || is_page() || is_archive()) { ?><?php wp_title('',true); ?> | <a href="<?php bloginfo('url'); ?>"><?php } ?><?php bloginfo('name'); ?></a></P>

</div>


<div id="splash">
<div id="header">

	<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>		
	<div id="desc"><?php bloginfo('description');?></div>

</div>
</div>


<div id="navigation">
  <ul>
    <li><?php wp_nav_menu(array(
 'theme_location' => 'menu_primair',
        'container' => 'div',
       'container_id' => 'menu'
   )); ?></li>
     </ul>
  
</div>

style.css
Code:
/* 
Theme Name: Horse Savvy
Theme URI: http://webdesign.savvy-cafe.com/
Description: <a href="http://webdesign.savvy-cafe.com/" title="Horse Savvy">Horse Savvy</a> is a free wordpress theme, released by <a href="http://webdesign.savvy-cafe.com" title="Horse Savvy" target="_blank">Horse Savvy</a>.
Version: 1.0
Author: Jennifer Hall
Author URI: http://savvy-cafe.com
*/

/* Elements */
* 
{
	margin:0;
	padding:0;
}
body {
	margin: 0;
	padding: 0;
	background:#362D25;
	font-family: Verdana,Tahoma, Arial, Serif;	
	line-height: 1.5em;
  	font-size: 0.7em;
	color: #000000;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	font-family: Verdana,Tahoma, Arial, Serif;
	font-weight:normal;
	color: #362D25;	
}

h6 {
         padding: 5px;
         font-size: 100%;
         background-color: #2F9A00;
         color : #FFFFFF;
}

h3.featured { text-transform: uppercase; font-size: 0.8em; line-height: 1.8em; font-weight: bold; padding: 0.7em 0.7em 0.9em 0.7em; color: #000000; letter-spacing: 0.1em; }

p, blockquote, ul, ol {
	margin-top: 0;
	padding-top: 0;
	margin-bottom:0.5em;	
}
p 
{
	line-height:1.8em;
}

a:link, a:visited {
	color: #993400;
	 text-decoration: none;
         font-weight:bold;
}
a:hover,a:active 
{
	color:#993400;
	 text-decoration: underline;
}



img.left 
{
	float:left;
	margin:0 1em 1em 0;
}
img.right 
{
	float:right;
	margin:0 0 1em 1em;
}

a img 
{
	border:0;
	text-decoration:none;
}

img {
	float:center;
         border: 4px solid #eeeeee ;
	margin:0 3px 3px 0;
}

blockquote 
{
	margin:1em;
	padding:0 2em;
	background:url(img/quote.gif) no-repeat left top;
	color:#666;
	font-style:italic;
}

/* Header */

#header {
	background:url(img/header.jpg) no-repeat bottom; 	
 	height: 145px;
         margin: 0 auto;
	width:1020px;
	padding:0;
	border:#FED370 0px solid;	

}

#header h1 
{
	margin: 105px 0px 0 0;	
	font-size: 2.4em;	
	padding:0px 20px 0 0;
	text-align:right;	
}
#header h1 a 
{
	color:#FFFFFF;
	text-decoration:none;
}
#header h1 a:hover 
{
	color:#FFFFFF;
}
#header #desc
{
	font-weight:normal;
	font-style:italic;
	font-size:1em;
	color:#E3E3E3;
	text-align:right;
	margin:0;
	padding:5px 20px 0 0px;
}


#navigation {
	font-family: Verdana,Tahoma, Arial, Serif;
        width: 1020px;
        margin: 0 auto;
	background:#993400;
}
	
        #navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

        #navigation ul li {
        float: left;
        margin: 0;
        padding: 0;
}

        #navigation ul li:hover {
        background-color: #F9FBE7;
}

        #navigation ul li a {
        float: left;
        margin: 0 1px 0 0;
        font-size: 100%;
        font-weight: bold;
        text-decoration: none;
        padding: 3px 10px;
        font-size: 11px;
        color: #FFFFFF;

}

        #navigation ul li a:hover {
        color: #362D25;
        background-color: #F9FBE7;
        border-bottom:#FFFEDD 0px dotted;
}

/* Logo */

#logo {
	margin: 0 auto 5px;
	padding:0 15px;
	width:990px;
	background: #362D25;
	border-bottom: 0px;	
	border-top:#ccc 0px solid; 
        border-right:#ccc 0px solid;
        border-left:#ccc 0px solid;
}

#logo p {
	margin: 0;
	padding: 0px;
	font-size: 0.9em;
	color: #FFFFFF;	
}
#logo p span 
{
	float:right;
}
#logo a:link, #logo a:visited {
	color: #FFFFFF;
	border:0;
}
#logo a:hover, #logo a:active,#logo p strong {
	color: #C92724;
	text-decoration:none;
	border:0;
        background-color: #FFFFFF;
}

/* Splash */

#splash {
        background-color: #FFFFFF;
        height:100px;
        width:1000px;
	margin: 0px auto;
/*Splash's redeclared in functions.php for WP 2.1 or greater */
}


/* Main */

#main {
	width: 1020px;
	margin: 0 auto;
	background:#FFFFFF;
	border:#FED370 0px solid;
}

#main h2 {
	padding: 4px;
	font-size: 1.6em;		
	line-height:1.2em;
	border-bottom:#eeeeee 1px solid;
}
#main h3 {
	padding: 4px;
	font-size: 1.4em;		
	line-height:1.2em;
	border-bottom:#eeeeee 1px solid;
}
#main h4 {
	padding: 0 0 5px;
	font-variant:small-caps;
	font-size:1.25em;
	line-height:1.2em;
	border-bottom:#eeeeee 1px solid;
}
#main h2 a 
{
	border:0;
}
#content ul {
	margin: 0.5em 0;
	padding: 0 0 0 2em;
	list-style-type:none;
}
#content ul li 
{
	margin:0.75em 0;
	list-style-image:url(img/bullets.gif);
	padding:0;
	line-height:1.8em;
}
#main ol 
{
	margin:0;
	padding:0 0 0 3em;
}
#main ol li 
{
    margin:0;
    padding:3px;
}
#main .post 
{
	margin-bottom:3em;
}
#main .entry 
{
    clear:both;
	padding: 10px 5px;
}
.post .date {
	float: right;
	margin:5px 0 0 5px;
	padding:0 10px;
	text-align:center;
	font-size: 0.8em;
	border:#ccc 1px solid;
	font-weight:bold;
	background:url(img/icon.gif) no-repeat;
	color:#556677;
	font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Serif;
}
.post .date span 
{
	display:block;
}
.post .date .day 
{
	font-size:1.6em;
}
.post .meta {
	margin-bottom: 10px;
	padding-left: 5px;
	font-size: 0.9em;
	color:#999;
}
.post .comments 
{
    font-size:0.9em;
    border-bottom:#ccc 1px dotted;
    color:#999;
    margin-left:5px;
    padding-left:15px;
    background:url(img/icon_comments.gif) no-repeat left center;
}
.post .comments a 
{
	border-bottom:0px;
}
#main .feed 
{
	background:url(img/icon_feed.gif) no-repeat left 3px;
	padding-left:17px; 
}
ul.authorposts
{
	margin:0;
	padding:0 2em;
}
ul.authorposts li
{
	margin:0;
	padding:5px;	
}
ul.authorposts li em 
{
	float:right;
	font-style:normal;
}
/* Content */

#content {
         background: #FFFFFF; 
	float: left;
	width: 540px;
	padding:5px;	
}

/* Column One */

#sidebar_left {
	float: left;
	width: 200px;		
	padding: 0px;	
	font-size:0.9em;
	margin:0px;	
}

/* Column Two */

#sidebar {
	float: right;
	width: 260px;		
	padding: 0px;	
	font-size:0.9em;
	margin:0px;	
}

/* featured post */

#featured { background: #F9FBE7 repeat-x bottom left; margin: 0 0 1.1em 0; float: left; width: 100%; }
.feat_content { float: left; padding: 0 0.7em 0.4em 0.7em; 
         font: 9px Verdana,Tahoma, Arial, Serif;	
	color:#000000;
}
.feat_thumb img { float: left; padding: 0; margin: 0.2em 1em 1em 0; border: 1px solid #999; }
.feat_title { 
         font: 700 12px Verdana,Tahoma, Arial, Serif;	
         padding: 0 0 0.3em 0; }
.feat_title a { color: #362D25; }
.feat_title a:hover { color: #362D25; }


#home_featured { background: #EAFCBA repeat-x bottom left; margin: 0 0 1.1em 0; float: left; width: 100%; }
.feat_content { float: left; padding: 0 0.2em 0.2em 0.2em; 
         font: 10px Verdana,Tahoma, Arial, Serif;	
	color:#000000;
}

#left_featured { background: #362D25 repeat-x bottom left; margin: 0 0 1.1em 0; float: center; width: 100%; }
.left_feat_content { float: center; padding: 0 0.7em 0.7em 0.7em; 
         font: 9px Verdana,Tahoma, Arial, Serif;	
	color:#FFFFFF;
}


#main .sidecol 
{
	border-left:#ccc 0px dotted;
}
#main .sidecol ul 
{
	margin:0;
	padding:0;
}
#main .sidecol li
{
	margin:0;
	padding:2px;
	list-style:none;
	background:none;
	margin-bottom:2em;

}
#main .sidecol h2
{
	padding: 0 0 5px 5px;
	font-variant:small-caps;
	font-size:1.7em;
}
#main .sidecol p, #main .sidecol form
{
	padding:10px;
	margin:0;
}
#main .sidecol ul ul
{
	margin:10px 0 0 10px;
	padding:0;
}
#main .sidecol ul ul ul
{
	margin:0px 0 0 10px;
	padding:0;
}
#main .sidecol li li 
{
	list-style-image:url(img/bullets.gif);
	margin:0.5em 0 0 10px;
	padding:0;
	
}
/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	text-decoration:none;
	}
#wp-calendar #today 
{
	border:#999 1px solid;
}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */

/* Comments */
input.textbox
{
	border:#ccc 1px solid;
	background:#f9f9f9;
	font:1em Verdana, Arial, Serif;
	padding:5px;
	width:150px;
}
textarea{
	width: 95%;
	padding:5px;
	height: 20em;
	border: 1px solid #ccc;	
	background:#f9f9f9;
	font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
	background:#fff;
	border:#999 1px solid;
}
#commentform 
{
	margin:0;
	padding:10px;
	background:#F9FBE7;
}
#main .commentlist {
	margin: 0;
	padding: 0;
}
#main .commentlist li 
{
	list-style:none;
	margin: 0;
	padding: 1em;			
	border-bottom:#ddd 1px solid;
	font-size:0.9em;
}
#main .commentlist li .cmtinfo 
{
	padding:5px;
	margin-bottom: 5px;
	position:relative;	
}
#main .commentlist li .cmtinfo em 
{
	margin:0;
	padding:0 1em;
	font-weight:normal;			
	font-style:normal;
	color:#666666;	
}
#main .commentlist li cite 
{
	font-style:normal;
	font-weight:bold;
	font-size:1.1em;
}
#main .commentlist li.alt
{
	background:#F9FBE7;	
}
#main .commentlist li.authorcomment
{
	border:none;
	border:#b0c4de 1px solid;	
}
#main .nocomments
{
	font-size:0.9em;
	color:#999;
	text-align:center;
}

/* Ads */

.ad_block { border: 1px solid #dadada; padding: 4px 0; margin: 1em 0 1.2em; text-align: center; }
.ad_block .ad160 { margin: 0 auto; width: 160px; }
.ad_block .ad180 { margin: 0 auto; width: 180px; }
.ad_block .ad250 { margin: 0 auto; width: 250px; }
.ad_block img, .ad_block p img { margin: 0; padding: 0; display: block; }

/* Footer */

#footer {
	margin: 5px auto 0;
	padding:0 15px;
	width:990px;
	background: #F9FBE7;
	border:#FED370 0px solid;
}

#footer p {
	margin: 0;
	padding: 7px;
	font-size: 0.9em;
	color: #000000;	
}
#footer p span 
{
	float:right;
}
#footer a:link, #footer a:visited {
	color: #708226;
	border:0;
}
#footer a:hover, #footer a:active {
	color: #592607;
	text-decoration:none;
	border:0;
}
#footer p strong {
	color: #000000;
	text-decoration:none;
	border:0;
}
#header, #main, #sidebar, #footer, .widget 
{
	overflow:hidden;
}


/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
color: #000000;
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */


img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncentered, div.aligncentered {
text-align:center;
margin:0 auto;
}
 
Laatst bewerkt:
Hoi Jacob,
Het probleem is, dat de 4 items van "info" in de html wel correct als submenu met een <ul class="sub-menu"> staan genoteerd, maar dat in de css alle styles voor een submenu ontbreken.
De hele .sub-menu met toebehoren (verwante styles die aangepast moeten worden) staat niet in het stylesheet! :rolleyes:

Dat is het probleem - nu de oplossing.
Daarvoor zijn er twee mogelijkheden:
  1. Submenu's bij de #navigatie staan in principe in het template, maar zijn niet ingeschakeld. Met wat struinen in de gebruiksaanwijzing van het template zou je daar achter moeten kunnen komen.
  2. Het template heeft gewoon geen submenu's. Dan zal je ze zelf de stijlregels daarvoor moeten maken. :)

Om een idee te geven voor het laatste, er zal iets moeten gebeuren in de geest van:
Code:
#navigation li { 
    position: relative;
    }
.sub-menu { 
    position: absolute !important; 
    left: 0; 
    padding-top: 2.5em !important; 
    margin: 0 0 0 -3.5em !important; 
    display: none;
    }
.sub-menu li { 
    background: blue; 
    }
.sub-menu li a {
    width: 11em;
    }
#menu-item-31:hover .sub-menu {
    display: block;
    }
Als je dit toevoegt aan de style.css, begint er al iets te komen.
Zoiets moet dan uitgetest worden in de verschillende in omloop zijnde browsers en browser-versies.

Met vriendelijke groet,
CSShunter
 
Het werkt, alleen is er nog 1 probleempje.

Het submenu item is zo breed als de hele menubalk. Ik wil de breedte hebben van het menuitem. Ook verschuiven de items van de gewone menubalk. Wat moet ik aanpassen in de css? Zie de bijlage voor het voorbeeld.

Naamloos.png
 
Hoi Jacob,
Ah, je hebt van:
Code:
.sub-menu {position: absolute !important; }
gemaakt:
Code:
.sub-menu {position: relative !important; }
  • Dat is een essentieel verschil. :P
  • Daardoor wordt bij jou het submenu ingevoegd in (de breedte van) het hoofdmenu-item ipv er onafhankelijk van te zijn, en wordt ook de menubalk hoger gemaakt (incl. het zakken van de hele pagina als je hovert).

En je hebt niet toegevoegd:
Code:
#navigation li { 
    position: relative;
    }
Daardoor komt het submenu niet "relatief aan de linkerkant lijnend" t.o.v. het hoofdmenu-item, maar t.o.v. de vensterbreedte.

Wat gebeurt er als je deze 2 dingen nog aanpast?
 
Laatst bewerkt:
Ik heb het nu op mijn telefoon bewerkt. Het lijkt dat alles werkt. Ik ga morgen nog even op de pc kijken of alles klopt.
 
Waar telefoons al niet goed voor zijn!
"Een website maken op de telefoon" klinkt voor mij nog steeds als "Een wasje draaien in de koelkast". ;)

Edit:
Bij mij werkt het prima in Firefox, Chrome, Opera en Safari.
Maar in IE7 alleen als je heel vlug van Info naar Verhuur hal muist, anders floept het submenu voortijdig weg en kan je er niet op klikken. - Altijd IE weer!
(Andere IE's niet getest, heb ik niet)
 
Laatst bewerkt:
IE7 gevangen! :d
Voeg toe:
Code:
.sub-menu {
	background: url(images/transp.gif);
	}
Het maakt zelfs niet uit of zo'n transparant gifje is geüpload of niet: ook als het er niet is, doet IE7 het op deze manier. Vraag niet hoe het kan, maar profiteer er van! ;)



Met vriendelijke groet,
CSShunter
______
PS: Als je rechtsonder in het header-img een klein tikje bruin stopt (cropped-De_Caprilli.jpg-nw.jpg), komt de titel wat beter tot zijn recht.
 
Heel erg bedankt, alles werkt.
Ik had gisteren met mijn telefoon even bewerkt in wordpress zelf. Je hebt dan weel geen kleurcodes, maar het is mogelijk.
Vandaag onderandere getest in IE9. Daar werkte het wel. Toch voor de zekerheid de css aangepast.

Ook nog bedankt voor de header image. Dit ziet er inderdaad beter uit.
 
Het werkt toch niet. Sorry. Ik was eerst bezig geweest met andere sites. De submenu's onder info werken. Alleen info kan ik niet meer aanklikken. Ook heb ik items toegevoegd onder linde en stuyvesantruiters. Die zie ik niet.
 
Hoi jacob,
Om de Info weer tevoorschijn te toveren:
Code:
#navigation ul li a {
   ...
   position: relative;
   z-index: 2;
   }
En om alle submenu's te laten werken:
Code:
#menu-topmenu li:hover .sub-menu {
   display: block;
   }
Verder had ik het er nooit achter gezocht, dat de knop "Info" zelf ook al naar een pagina gaat. Ik dacht dat de 3 items van het uitrollen de enige waren, en zou nooit op "Info" zelf klikken. Vermoedelijk zullen meer mensen dat denken, en komen ze nooit op de belangrijke info-pagina uit, waar alle bestuursleden, commissies en telefoonnummers op staan!
Ik zou daarom een extra sub-item in het lijstje opnemen, bv. met als titel "Contact", die naar dezelfde info-pagina gaat. Dan is het altijd raak! :)

Hetzelfde kan met de Linderuiters en de Stuyvesantruiters: daar kan de extra link bv. "Algemeen" heten.



Tenslotte merkte ik (op resolutie 1280*1024px) dat de pagina's wat L/R heen een weer springen bij wisselen tussen een korte en een lage pagina.

Met vriendelijke groet,
CSShunter
 
Om info te gebruiken is inderdaad niet zo handig. Ik ga het nu om jouw manier doen. De rest werkt. Bedankt.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan