Вот такой вопрос, я взял меню из стандартного demo сайта модекс,
<div id="ajaxmenu"> <ul id="myajaxmenu">
<li class="category first"><a href="http://demo.opensourcecms.com/modx/" title="Home">Home</a></li>
<li class="category "><a href="/modx/seitefeatures.html" title="MODx Features">Features</a><ul style="display:none">
<li class="first"><a href="/modx/seiteajax.html" title="Ajax">Ajax</a></li>
<li><a href="/modx/seitemenus.html" title="Menus and Lists">Menus and Lists</a></li>
<li><a href="/modx/seitecms.html" title="Content Management">Manage Content</a></li>
<li class="last"><a href="/modx/seiteextendable.html" title="Extendable by design">Extendability</a></li>
</ul></li>
<li class="category "><a href="/modx/seitegeting-help.html" title="Getting Help">Getting Help</a></li>
<li class="category "><a href="/modx/seitetemplates.html" title="Template Examples">Templates</a><ul style="display:none">
<li class="first"><a href="index.php?id=39" title="MODxHost">MODxHost</a></li>
<li><a href="/modx/seitemodxcss_wide.html" title="MODxCSS Wide">MODxCSS Wide</a></li>
<li class="last"><a href="/modx/seitemodxcss.html" title="MODxCSS">MODxCSS</a></li>
</ul></li>
<li class="category "><a href="/modx/seitedesign.html" title="Design">Design</a></li>
<li class="category last"><a href="/modx/seitecontact-us.html" title="Contact Us">Contact us</a></li>
</ul> </div>
И меня заинтересовал класс <li class="category first">, который вроде как нигде не используется, ведь в CSS фале у нас:
li.firstcategory
/* Styles for Menu Items */
#ajaxmenu ul li.firstcategory {
color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;
}
#ajaxmenu ul li.category {
color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: -111px;
margin: 0px;
}
#ajaxmenu ul li.lastcategory {
color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: -222px;
margin: 0px;
}
Где тогда используется li.firstcategory я не понял, потому как ни в одном шаблоне стандартном его нет..
Вопрос этот меня начал мучать потому, что я хотел сделать меню, в котором основные пункты были бы ширины, скажем, а подпункты все остальные выравнивались автоматом до самого большего среди них по контенту... Но никак не получается.. Уже каша какая-то, особенно, когда стал разбираться со стандартными шаблонами..
Я в
#ajaxmenu ul li {
width: auto;
}
поставил авто и вдруг оно заработало, но как оказалось только в опере.. в общем, я уже запутался что за что отвечает..
Может кто-нибудь лопатил стандартные css’ы и сможет подсказать что за что отвечает, что бы сделать задуманное?
Зы, я начал все стандартное лопатить и на основе этого делать для того, что бы полностью разобраться в технологии "приготовления" меню
