Kazda polozka menu - pozadi jinou barvou?

Máte problém, hľadáte niečo? Opýtajte sa a poradíme...

Moderátor: Moderators

martin.kuna
Amateur
Amateur
Príspevky: 16
Dátum registrácie: Po Okt 10, 2005 9:51 pm

Kazda polozka menu - pozadi jinou barvou?

Príspevok od používateľa martin.kuna »

Ahoj,

potreboval bych nejak modifikovat snippet "menu builder" nebo nejaky jiny, abych ke kazde polozce hlavniho menu mohl priradit CSS tridu (aby vysledny kod vypadal takto <div class="polozkaA">Novinky</div> ... <div class="polozkaX">kontakt</div>).
potrebuju, aby bylo pozadi kazde polozky v menu jinou barvou. a zaroven aby bylo dynamicky generovane (pouze bych manualne priradil styl kazdemu odkazu v menu).
Podobne je to na nasledujici strance. Myslim ale, ze to maji udelane manulane, ne dynamicky, a jeste navic s javascriptem.

http://www.hussaini-preschool.co.uk/

Ja bych to potreboval jako stromove menu umistene ve sloupci po leve strane, takze manualni reseni neni idealni. Aby se po kliknuti na odkaz "rozbalilo" , stejne jako je to treba na webu Etomite.sk.

Diky moc!
Martin
Používateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať používateľa:

Príspevok od používateľa _rasel^ »

Chvilu som nadtym rozmyslal... a zistil som, ze keby sa nato urobil snippet, tak by to vobec nic nevyriesilo, lebo aj tak by trebalo manualne priradovat styly. Snippet by tak neplnil svoju ulohu...

Najjednoduchsie riesenie je asi take, ze si najprv vytvoris novy Chunk (davku informacii) - aby si nemusel editovat templat a nazvi si ho napriklad FarebneMenu. Do templatu na miesto kde ma byt menu das {{FarebneMenu}}

Obsah Chunku bude taky:

Kód: Vybrať všetko

<style type="text/css">
#uvod a, #uvod a:hover {
   margin: 3px;
   padding: 3px;
   background: #00000;
   color: #ffffff;
   display: block;
}
#uvod a:hover {
   padding: 3px;
   background: #ffffff;
   color: #000000;
}
...
#kontakt a, #kontakt a:hover {
   margin: 3px;
   padding: 3px;
   background: #00000;
   color: #ffffff;
   display: block;
}
#kontakt a:hover {
   padding: 3px;
   background: #ffffff;
   color: #000000;
}
</style>

<div id="uvod"><a herf="[~id_dokumentu~]">Uvod</a></div>
...
<div id="kontakt"><a herf=[~id_dokumentu~]>Kontakt</a></div>
..:: Etomite CMS → Rulezzz !.!.!. ::..
martin.kuna
Amateur
Amateur
Príspevky: 16
Dátum registrácie: Po Okt 10, 2005 9:51 pm

potrebuju, aby byla dynamicka dalsi uroven

Príspevok od používateľa martin.kuna »

potreboval bych, aby se mi menu "rozbalilo" pri kliknuti na kategorii, ktera obsahuje jeste dalsi podkategorie.

Prikladam obrazky pro lepsi ilustraci:

obrazek home.jpg ... takto by melo vypadat menu na uvodni strance
obrazek level2.jpg ... takto by melo vypadat menu po kliknuti na polozku "Produkty"
Prílohy
menu na uvodni strance
menu na uvodni strance
home.jpg (36.96 KiB) 4652 zobrazení
&amp;quot;rozbalene&amp;quot; menu
&quot;rozbalene&quot; menu
level2.jpg (35.78 KiB) 4653 zobrazení
Používateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať používateľa:

Re: potrebuju, aby byla dynamicka dalsi uroven

Príspevok od používateľa _rasel^ »

Da sa to urobit este tak, ze "Uvod" by bol cercenou farbou, "eShop" zelenou. Ale aj podkategorie - to co je v zlozke by malo rovnake style.

A to tak, ze tam kde ma byt menu by si dal:

Kód: Vybrať všetko

<div class="">[[MenuBuilder?id=id_zlozky_uvod]]</div>
<div class="">[[MenuBuilder?id=id_zlozky_eshop]]</div>
...
<div class="">[[MenuBuilder?id=id_dokumentu_kontakt]]</div>
Ale nesmie sa tam nachadzat [[MenuBuilder?id=0]] (na root), lebo ono to ma v sebe aj podpriecinky, proste treba natvrdo dat vsetky zlozky v roote a aj vsetky dokumenty.

btw: Len sa mi zda, ze to nebude fungovat, tak ako chces... snippet sa mi vymyslat nato nechce.
..:: Etomite CMS → Rulezzz !.!.!. ::..
Používateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať používateľa:

Príspevok od používateľa _rasel^ »

Upravil som snippet MenuBuilder. Ked chceme neakej polozke v menu priradit style tak to urobime takto:

Kód: Vybrať všetko

#1 a, #1 a:hover {
   margin: 3px;
   padding: 3px;
   background: #00000;
   color: #ffffff;
   display: block;
}
#1 a:hover {
   padding: 3px;
   background: #ffffff;
   color: #000000;
}
Kde '1' je id dokumentu.
Prva cast style je na odkaz, a druha ked je 'kurzor cez'.
Prílohy
MenuBuilder.rar
Upraveny MenuBuilder
(464 Bajtov) 238 stiahnutí
martin.kuna
Amateur
Amateur
Príspevky: 16
Dátum registrácie: Po Okt 10, 2005 9:51 pm

Príspevok od používateľa martin.kuna »

#1 neni korektni pojmenovani CSS identifikatoru, protoze zacina cislici...

a mohl bych te poprosit, jestli by bylo mozne kdyztak upravit spis snippet "ListMenu", ktery je pouzity treba u Etomite 6.0.1? je trosku vymakanejsi...

diky moc!
Používateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať používateľa:

Príspevok od používateľa _rasel^ »

Kód: Vybrať všetko

#lm_1 a, #lm_1 a:hover {
   margin: 3px;
   padding: 3px;
   background: #00000;
   color: #ffffff;
   display: block;
}
#lm_1 a:hover {
   padding: 3px;
   background: #ffffff;
   color: #000000;
}
Kde '1' je id dokumentu.
Prva cast style je na odkaz, a druha ked je 'kurzor cez'.

btw: Este treba otestovat, teraz by to uz malo fungovat. ListMenu je ovela zlozitejsi ako MenuBuilder.

Upraveny snippet ListMenu:

Kód: Vybrať všetko

// --------------------
// Snippet: ListMenu
// --------------------
// Version: 0.6f
// Date: 2005.08.04
// jaredc@honeydewdesign.com
//
// This snippet was designed to show navigation
// in a nested lists of arbitrary depth.

// Configuration Settings

   // $removeNewLines
   // This setting will remove white space from between <ul> and <li> 
   // items so the list can be styled in IE. This makes it hard to read
   // the source code- set to false for troubleshooting before launch. 
   // False is also handy if the list will be horizontal.
   $removeNewLines = true;

   // $currentAsLink
   // If you would like to turn off the link for the
   // current page, set to false.
   $currentAsLink = false;

   // $LM_node [ int ]
   // Settable in snippet call only. Allows you to set an arbitrary
   // anchor for this menu. Should be id number of initial document.
   // For ListMenu this is typically the current page so that the
   // snippet will generate a list back to the site root.
   // [[ListMenu?LM_node=56]]

   // $levelsDeep [ int ]
   // Specifies how many levels of menu you want to show starting
   // with the children of current document working back to root. For
   // example, 3 levels would give you the children of the current 
   // page, the current page and its siblings, and the current page's 
   // parent and its siblings. The child generation is counted regardless
   // of wether or not there are children. 
   //
   // You can also specify negative  values. Negative values indicate
   // how many levels NOT to include, starting at the root. For example,
   // if you want all BUT the root level showing, you can declare -1.
   // This would be a main section menu - but without the "global" options.
   //
   // The default of 0 will show current children all the  back to root.
   // This represents the complete menu. You can also set this in a snippet
   // call with LM_levels:
   // [[ListMenu?LM_levels=1]]
   $levelsDeep = 0;

   // $directGeneology [ true | false ]
   // Set this option if you only want to show the direct geneolgy. For
   // instance, with this set to true, and you were on examplePage 5
   // levels deep, you would see all of examplePage's child pages (if
   // any), examplePage's parent, but NOT siblings of any parent above
   // the current page.
   $directGeneology = true;
   
   // $showGlobals [ true | false ]
   // Leave the root level folders showing, even if $directGeneology is
   // true. NOTE- this will NOT override a set $levelsDeep. Settable in 
   // snippet call with LM_globals (0=false, 1=true)
   // [[ListMenu?LM_globals=1]]
   $showGlobals = true;

   // $sortWiz [ array ]
   // You can specify any number of sort columns and directions, so you
   // are not limited to menuindex - for instance you might want alphabetic
   // or folders first or whatever. Format each sort like this:
   // $sortWiz[] = array("sortColumn","direction");
   // Where sortColumn is the sort column like isfolder, pagetitle, etc.
   // and direction is "ASC" for ascending and "DESC" is descending.
   // Default is:
   // $sortWiz[] = array("menuindex","ASC");
   // If you wanted folders first, THEN contents in alphabetical order:
   // $sortWiz[] = array("isfolder","ASC");
   // $sortWiz[] = array("pagetitle","ASC");
   $sortWiz[] = array("menuindex","ASC");
   
   // $alternateRows [ true | false ]
   // Append "_alt" to style class of alternate rows (true)
   $alternateRows = false;
   
   // $showDescription [ true | false ]
   // Show the description under the link- usually not necessary
   // Set in snippet call with LM_desc:
   // [[ListMenu?LM_desc=1]]
   $showDescription = false;

// STYLES used
//
// #LM_level_N      menu level where N is the number of the depth
//                  starting at 0
// #LM_youAreHere   menu item of current location
// .LM_expanded     expanded menu item with children
// .LM_collapsed    menu item with childen, but not expanded
// .LM_endPage      menu item with children
// .LM_description  menu item description
// 

// ########################################
// End Config
// The rest takes care of itself
// ########################################

// Adjust for snippet variables
$showGlobals = (isset($LM_globals))? $LM_globals : $showGlobals ;
$levelsDeep = (isset($LM_levels))? $LM_levels : $levelsDeep ;
$showDescription = (isset($LM_desc))? $LM_desc : $showDescription ;

// Make adjustment for new lines 
$ieSpace = ($removeNewLines)? "" : "\n";

// Create Geneology

$fullGeneology = array();
$geneologyMarker = (isset($LM_node))? $LM_node : $etomite->documentIdentifier;
while ($currentMarker=$etomite->getPageInfo($geneologyMarker, null, 'id,parent')){
    $fullGeneology[] = $currentMarker['id'];
    $geneologyMarker = $currentMarker['parent'];
}
$fullGeneology[] = 0;

// alter geneology for correct depth
$geneology = array();
if (($levelsDeep > 0) && (count($fullGeneology) > $levelsDeep)){
    for($i = 0; $i < $levelsDeep; $i++){
        $geneology[] = $fullGeneology[$i];
    }
} elseif (($levelsDeep) < 0 && (count($fullGeneology) > abs($levelsDeep))){
    for ($i = 0; $i < -$levelsDeep; $i++){
        array_pop($fullGeneology);
    }
    $geneology = $fullGeneology;
} else {
    $geneology = $fullGeneology;
}

// Build lists

// Initialize
$currentParent = $geneology[0];


$listSoFar = '';
$lookForChild = 0;
// Assemble sort string
$sortString = '';
foreach($sortWiz as $sortCriteria){
  $sortString .= $sortCriteria[0] . " " . $sortCriteria[1] . ", ";
}
$sortString = substr($sortString,0,strlen($sortString)-2);

for($geneCount=0;$geneCount < count($geneology);$geneCount++){
    $childrenList = $etomite->getActiveChildren($geneology[$geneCount], $sortString, null,'id, pagetitle, longtitle, parent, isfolder, description');
    if ($childrenList){
        $currentLevelList = '<ul id="LM_level_'.(count($geneology)-$geneCount).'">'.$ieSpace;
        $listPosition = 0;
        foreach ($childrenList as $childItem){
          if (!$directGeneology || $geneCount==0 || (($geneCount==1)&&(!$etomite->getActiveChildren($geneology[0]))) || ($directGeneology && in_array($childItem['id'],$geneology)) || ($showGlobals && ($geneology[$geneCount]==0))){
                if ($childItem['isfolder']){
                    $cssStyle = (in_array($childItem['id'], $geneology))? ' class="LM_expanded': ' class="LM_collapsed';
                } else {
                    $cssStyle = ' class="LM_endPage';
                }
	    $cssStyle .= ($alternateRows && ($listPosition%2))? '_alt"' : '"';
                $currentLevelList .= '<li'.$cssStyle.'>';				
                if((!$currentAsLink) && ($childItem['id'] == $etomite->documentIdentifier)){
                    $currentLevelList .= '<span id="LM_youAreHere">';
                    $currentLevelList .= $childItem['pagetitle'].'</span>';
                } else {
                    $linkTitle = ($childItem['longtitle'])? $childItem['longtitle'] : $childItem['pagetitle'] ;
                    $currentLevelList .= '<div id=lm_"'.$children[$x]['id'].'"><a href="[~'.$childItem['id'].'~]" title="' . $linkTitle .'">';
                    $currentLevelList .= $childItem['pagetitle'].'</a></div>';
                }
	    $currentLevelList .= ($showDescription)? '<div class="LM_description">'.$childItem['description'].'</div>' : '' ;
                if ($lookForChild == $childItem['id']) {
                    $currentLevelList .= $listSoFar;
                }
                $currentLevelList .= '</li>'.$ieSpace;
          }
          $listPosition++;
        }
        $currentLevelList .= '</ul>'.$ieSpace;
      }
    $listSoFar = $currentLevelList;
    $lookForChild = $geneology[$geneCount];   
}

// send to parser
return $listSoFar;
..:: Etomite CMS → Rulezzz !.!.!. ::..
Používateľov profilový obrázok
Spade
etoModerator
Príspevky: 171
Dátum registrácie: Po Apr 17, 2006 2:24 pm
Kontaktovať používateľa:

Re: Kazda polozka menu - pozadi jinou barvou?

Príspevok od používateľa Spade »

A bolo by mozne spravit len jednoducho menu, kde sa po kliknuti na polozku, ktora sa obsahuje podpolozky, aby sa rozbalila (teda po kliknuti sa zobrazia jej podpolozky) + nastavit vlastny styl pre klasicku polozku a styl pre podpolozku?
Ách deti moje zlaté, milujte sa a zložte sa. Nech si zvíratá berú od vás príklad.
Človečina, RND.
Napísať odpoveď