--=REKLAMA=--

Active

Z Joomla!WikiPL

<< Zobacz stronę Standardowe style CSS w Joomla!

Opisywany element Selektor ID Selektor klasy Przyrostek
li active
Szablony dla: Joomla 1.5
Zastosowany w: modules/mod_mainmenu/tmpl/default.php
Stylizuje: aktywną pozycję menu (<li class="parent active item278">)
.active {}

active {}

Przeznaczenie

Formatuje aktywną pozycję menu: <li class="parent active item278">

Wykorzystany

  • w pliku modules/ mod_mainmenu/tmpl/default.php

Kod PHP

   if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path))) {
      if ($node->attributes('class')) {
         $node->addAttribute('class', $node->attributes('class').' active');
      } else {
         $node->addAttribute('class', 'active');
      }
   } else {
      if (isset($args['children']) && !$args['children']) {
         $children = $node->children();
         foreach ($node->children() as $child) {
            if ($child->name() == 'ul') {
               $node->removeChild($child);
            }
         }
      }
   }

Kod HTML

<div class="module_menu">
   <div>
      <div>
         <div>
            <h3>Menu witryny</h3>
            <ul class="menu"><li id="current" class="active item1"><a href="xxxx"><span>Start</span></a></li>
               <li class="parent item27"><a href="xxxx"><span>Joomla! - przegląd</span></a>
                  <ul>
                     <li class="item34"><a href="xxxx"><span>Co nowego w 1.5</span></a></li>
                  </ul>
               </li>
               <li class="item2"><a href="xxxx"><span>Licencja Joomla!</span></a></li>
               <li class="item37"><a href="xxxx"><span>Więcej o Joomla!</span></a></li>
               <li class="item41"><a href="xxxx"><span>Częste pytania</span></a></li>
               <li class="item50"><a href="xxxx"><span>Nowiny</span></a></li>
               <li class="item60"><span class="separator"><img src="xxxx/ikona.png" align="left" alt="separator" /><span>Separator</span></span></li>
            </ul>
         </div>
      </div>
   </div>
</div>

Przykładowy kod CSS

/* zrodlo: Beez template - layout.css */
#left ul li.active ul li a:link,#left ul li.active ul li a:visited {
background:#fff;
border-bottom:solid 1px #E0C1E0;
border-left:solid 0 #DD75BB;
color:#000;
font-weight:normal;
padding:3px 4px 3px 20px;
}
 
#left ul li.active ul li ul li a:link,#left ul li.active ul li ul li a:visited {
background:#fff;
border-bottom:solid 1px #E0C1E0;
color:#000;
font-weight:normal;
margin:0 0 0 10px;
}
 
#left ul li.active ul li.active a:link,#left ul li.active ul li.active a:visited {
background:#fff;
border-left:solid 0 #DD75BB;
color:#000;
font-weight:bold;
}
 
#left ul li.active ul li.active ul li a:link,#left ul li.active ul li.active ul li a:visited {
background:url(../images/arrow.gif) #fff no-repeat top left;
color:#000;
font-weight:normal;
margin:0 0 0 15px;
padding:3px 0 3px 15px;
}
 
#left ul li.active ul li.active ul li.active span.active_link {
background:url(../images/arrow.gif) #fff no-repeat top left;
border-bottom:solid 1px #E0C1E0;
color:#000;
font-weight:bold;
margin:0 0 0 15px;
padding:3px 0 3px 15px;
}

Wynik

Dziękujemy za wkład

» Stefan Wajda [zwiastun],