Tere,

Küsimus järgmine - kas on võimalik dünaamilise sisuga lehel kuidagi määrata staatilisele menüüle active klassi?

Kuna kujundus nõuab menüünuppude puhul piltide kasutamist, leidsin, et kõige parem lahendus oleks järgnev:

HTML

Kood:

<ul class="menu"> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="services"><a href="#">Services</a></li> <li class="work"><a href="#">Work</a></li> <li class="contact"><a href="#">Contact</a></li> </ul>

CSS

Kood:

.menu { margin: 0; padding: 0; list-style: none; float:right; } .menu li { padding: 0; margin: 0; height: 150px; margin-right: 0.5em; list-style: none; background-repeat: no-repeat; } .menu li a, .menu li a:visited { display: block; text-decoration: none; text-indent: -9999px; height: 150px; background-repeat: no-repeat; } .home {background-image: url(../gfx/home_hover.png); width: 107px;} .home a {background-image: url(../gfx/home.png);} .about {background-image: url(../gfx/aboutus_hover.png); width: 112px;} .about a {background-image: url(../gfx/aboutus.png);} .services {background-image: url(../gfx/services_hover.png); width: 183px;} .services a {background-image: url(../gfx/services.png);} .work {background-image: url(../gfx/work_cs.png); width: 144px;} .work a {background-image: url(../gfx/work.png);} .contact {background-image: url(../gfx/contact_hover.png); width: 146px;} .contact a {background-image: url(../gfx/contact.png);} .menu li {float: left;} .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

Ehk siis, kas on kuidagi võimalik määrata (kas siis javascriptiga või css'ga), et aktiivsel lingil jääb vastav (hover) taust?

Kus sa seda menüüd ehitad?
Mõni CMS kujundus või puhtalt HTML/CSS leht?

Võimalus active classi lisamiseks on javascriptiga (jQuery'ga) olemas.

Kood:

<script type="text/javascript"> var $j = jQuery.noConflict(); $('.menu a').click(function() { var $this = $(this); if (!$this.hasClass('active')) { $this.parents('.menu').find('.active').removeClass('active'); $this.addClass('active'); } }); </script>

See kontrollib classi "menu" lingi vajutamisel linkide classe ja lisab vajutatud lingi classiks "active", samas eemaldades teistel "menu" linkidelt selle classi.

Lisaks ära unusta enne seda scripti lisada jQuery't

Kood:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Ja veel, hover efekt on CSSis ju endas olemas.

Kokku tuleks siis näiteks:

Kood:

.home:hover {background-image: url(../gfx/home_hover.png); width: 107px; } .home a .active {background-image: url(../gfx/home.png); }

Ja nii edasi.



Anna teada, kuidas välja tuli.

No kui sa lingile vajutad, siis leht loetakse ju ringi, kas siis index.php?leht=1 või hoopis mingi kontaktid.html siis pole sellisest JQ koodist midagi kasu.
Muidugi, kui sisu vahetad ka JQ abil, siis sobib see variant ideaalselt.
Kui aga vaja leht ümber lugeda siis võid midagi sellist teha
Sa tead millisel lehel oled ju ja vastavalt sellele hoiad aktiivset linki menüüs.

Kood:

<style> .home{} .about{} .services{} .work{} .contact{} .active{} </style> <?php $link[1] = "home"; $link[2]= "about"; $link[3] = "services"; $link[4] = "work"; $link[5] = "contact"; if(isset($_GET['leht'])){ $leht=$_GET['leht']; $link[$leht]="active"; }else{ $link[1]="active"; } echo' <ul class="menu"> <li class="'.$link[1].'"><a href="?leht=1">Home</a></li> <li class="'.$link[2].'"><a href="?leht=2">About</a></li> <li class="'.$link[3].'"><a href="?leht=3">Services</a></li> <li class="'.$link[4].'"><a href="?leht=4">Work</a></li> <li class="'.$link[5].'"><a href="?leht=5">Contact</a></li> </ul> '; ?>

[Muudetud: 6.9.2011 andrusny]

Menüü läheb Saurus CMS template tarbeks, kuna template failid on html formaadis (php'na salvestades ei ole väga tolku) ja nagu aru sain php scripte niisama saurus ei loe, tuleb smarty pluginaks teha, sellepärast mõtlesingi, et äkki leidub mõni ja alternatiiv

Või saaks ma kuidagi teha, et html fail võtab kuskilt eraldi php faili kus on see kood?

JS-iga saab ka teha:

Kood:

<script src="http://code.jquery.com/jquery-latest.js"></script> <script> var match = window.location.search.match(/page=([^&]*)/); var page = match && match[1] || 'home'; // home - vaikimisi väärtus $('.' + page).addClass('active'); </script>

Töötab, kui lehe aadress midagi sellist: http://www.example.com/index.php?page=home

Muidugi oleks parem mingit serveripoolset lahendus kasutada. Smarty võiks teoorias midagi sellist töötada, katsetanud pole:

Kood:

<li class="home{if $smarty.get.page == 'home'} active{/if}"><a href="#">Home</a></li> <li class="about{if $smarty.get.page == 'about'} active{/if}"><a href="#">About</a></li> jne

Selle CMS'ga peaks saama menüü kutsuda ju kuidagi?
Siis peaks ta ise juurde panema "selected" classi.

Saurusel saab dünaamilise menüü genereerida muidu nii

Kood:

<ul id="main_menu"> {strip} {********** Site menu **********} {init_sections name="sections_1" level="1" classes="section,link"} {foreach from=$sections_1 item="section_1"} {if $section_1->is_selected} {assign var="current_section_1_title" value=$section_1->title} {assign var="current_section_1_id" value=$section_1->id} {/if} <li {if $section_1->is_selected} class="active"{/if}><a href="{$section_1->href}">{$section_1->buttons}{$section_1->title}</a></li> {foreachelse} <li>{$sections_1_newbutton}</li> {/foreach} {********** /Site menu **********} {/strip} </ul>

aga antudjuhul pean kasutama pildifaile menüüs

Ma saan aru, et selle lahenduse probleem on erinevate nimedega klasside (home, about jms) puudumine? $section_1->id või mõni muu muutuja ei hoia sellist infot?

Niipea kui veebiserveri korda saan, hakkan testima väljapakutud lahendusi, tänud!