• Opgelost Nientje07

    (@nientje07)


    Hallo,

    Ik zou graag het eerste item in mijn bovenste navigatie een andere opmaak geven dan de andere items. dit moet gebeuren wanneer ik er met de muisaanwijzer opsta en wanneer dat item geselecteerd is.

    de code die momenteel gebruikt wordt is:

    <div id="nav">
    	<div class="menu">
    		<div class="in">
    		<ul>
    		<?php wp_list_pages('exclude=53,56,59,62,65,68,71,75,78,81&title_li='); ?>
    		</ul>
    		</div>
    		</div>
    	</div>

    Bijhorende css:

    #nav {
    	float:right;
    	width:775px;
    	height:38px;
    	line-height:38px;
    	background: #ececec url(images/topbar.jpg) no-repeat left;
    
    	}
    	#nav ul {
    	margin:0px;
    	padding:0px;
    	}
    
    	#nav ul li {
    	background: url("images/splitter.jpg") no-repeat scroll right top transparent;
    	float: left;
    	list-style: none outside none;
    	text-align: center;
    	}
    
    	#nav ul li a {
    	color: #000000;
    	display: block;
    	padding: 0 22px;
    	text-decoration: none;
    
    	}
    	#nav ul li a:hover {
    	background: url('images/menu_hover2.gif') no-repeat left;
    	color:#fff;
    	}
    
    	.menu li.current_page_item a{
    	background: url('images/menu_hover2.gif') no-repeat left;
    	color:#FFF!important;
    	}

    Dus wanneer een item geselecteerd is of wanneer er op gestaan wordt met de muisaanwijzer wordt afbeelding menu_hover2 gebruikt.

    Voor het eerste item moet dit echter menu_hover worden.

    ikzelf dacht aan het volgende:
    ik maak van <?php wp_list_pages('exclude=53,56,59,62,65,68,71,75,78,81&title_li='); ?>

    <?php wp_list_pages('include=28&title_li='); ?>
    				<?php wp_list_pages('exclude=28,53,56,59,62,65,68,71,75,78,81&title_li='); ?>

    (omdat het eerste item van het menu pagina 28 is.)
    Ik wou dan die eerste php een andere css stijl geven, maar dit lukt dus niet.

    Kan iemand mij zeggen hoe ik dit dan wel moet doen?

    Alvast bedankt,
    Nina

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Dat kan je hier niet aan zien..

    Je moet even de code copy-/pasten uit je html pagina. Je bent nu in .php aan het kijken das erg irritant omdat je niet kan zien welke class iets krijgt.

    Als je site online staat erg post even een link naar de pagina of kijk in de broncode en post hier je menu-bar in html.

    Thread starter Nientje07

    (@nientje07)

    Dit is de html code vanuit de broncode.

    <div id="nav1">
    	<div class="menu1">
    		<div class="in">
    				<ul>
    				<li class="page_item page-item-28 current_page_item"><a href="http://srv007.atait.local/wordpress/">Home</a></li>
    
    				<li class="page_item page-item-101"><a href="http://srv007.atait.local/wordpress/?page_id=101">Referenties</a></li>
    <li class="page_item page-item-206"><a href="http://srv007.atait.local/wordpress/?page_id=206">Over ATA IT</a></li>
    				</ul>
    
    		</div>
    		</div>
    	</div>

    In deze html staat het eerste item (home) al afzonderlijk. (zoals ik heb getoond in de laatste phpcode uit mijn vorige post.)

    Probeer eens dit aan je stylesheet toe te voegen:

    .menu li.page-item-28 a {
         color: #ff0000;
    }
    .menu li.page-item-28 a:hover {
         color: #f1f1f1;
         text-transform: underline;
    }

    En stijlwaardes kan je zelf aanpassen naar smaak.

    Thread starter Nientje07

    (@nientje07)

    Dat is het nog niet helemaal.

    Als ik nu op het item ga staan, krijgt hij niet de juiste opmaak. hij krijgt dezelfde opmaak als wanneer ik op een ander item ga staan.
    wanneer ik op de homepagina ben (en het item dus geselecteerd is.) toont hij het wel correct.
    Wanneer ik op een andere pagina ben/een ander item selecteer, dan behoudt hij de zwarte achtergrond (zoals wanneer hij geselecteerd is). de tekstkleur veranderd wel.

    dit is de opmaak die ik opgegeven heb:

    .menu li.page-item-28 a {
     	background: url('images/menu_hover.gif') no-repeat left;
    	color:#fff;	}
    
    	.menu li.page-item-28 a:hover {
    	background: url('images/menu_hover.gif') no-repeat left;
    	color:#FFF;
    	}

    Welke informatie heb je nog nodig?
    alvast bedankt

    Thread starter Nientje07

    (@nientje07)

    Ik heb nog enkele kleine wijzigingen aangebracht aan de css en nu werkt het zoals ik het wel.

    dit is mijn code

    .menu li.current_page_item.page-item-28 a {
     	background: url('images/menu_hover.gif') no-repeat left;
    	color:#fff;	}
    
    	#nav ul li.page-item-28 a:hover {
    	background: url('images/menu_hover.gif') no-repeat left;
    	color:#FFF!important;

    Bedankt voor je hulp Jaja.. zonder jou had ik het nooit gevonden.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

Het onderwerp ‘Eerste menu-item moet een andere stijl krijgen’ is gesloten voor nieuwe reacties.