کد css and html منو تصویری بسیار زیبا و سازگار

[webtaweb.ir 13]

سلام دوستان

کد css

The CSS Rule[/b]

<style type="text/css">
<!--
.expand-down {
 font-family:Arial, Helvetica, sans-serif;
 line-height:normal;
 margin-top:20px;
 height:150px;
 width:500px;
 background: url(/images/demos/macosx-style-background.png) no-repeat;
 margin-bottom:30px;
}
/* reset margins and paddings */
.expand-down * {
 margin: 0;
 padding: 0;
}
.expand-down ul {
 padding-top:10px;
 margin-left:10px;
}
.expand-down ul li {
 float:left;
 list-style-type:none;
}
.expand-down ul li a {
 text-decoration:none;
}
.expand-down ul li a img {
 width:50px;  /* initial width of images, 50% of width */
 height:50px; /* initial height of images, 50% of height */
 border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-down ul li a span {
 display:none;
}
.expand-down ul li:hover a span {
 /* show label on mouse hover */
 display:block;
 font-size:14px;
 text-align:center;
 color:#fff;
}
/* expand the image to 100% on mouse hover.
** an image becomes active when mouse hovers it
** ideally, the image should have same width and height as below 
*/
.expand-down ul li:hover a img {
 width:100px;
 height:100px;
}
/* expand the image next to the right of the active image to 60% using + selector */
.expand-down ul li:hover + li a img {
 width:60px;
 height:60px;
}
/* expand the image second to the right of the active image to 55% using + selectors */
.expand-down ul li:hover + li + li a img {
 width:55px;
 height:55px;
}
-->

</style>

<div class="expand-down">
 <ul>
   <li>
     <a href="http://jigsaw.w3.org/css-validator/check/referer">
       <!-- the image -->
       <img src="/images/demos/w3c-valid-css-trans.png" />
       <!-- the label -->
       <span>Valid CSS</span>
     </a>
   </li>
   <!-- make copies of <li>...</li> block to create more items ... -->
 </ul>
</div>

دمو

خودم برای سایتم استفاده کردم

بسیار عالی هست واقعا css جادو می کند

از جند تا ماژول خواستم استفاده کنم که همگی قالبم بهم می ریختن

ولی این کد بسیار عالی عمل کرد

راهنمایی

ماژول ماژول mod_flexi_customcode از تو انجمن دانلود بفرمایید و نصب کنید

یه پوزیشن بهش اختصاص بدید

کد های css درون جای کدها در ماژول mod_flexi_customcode کپی بفرمایید

حالا یه ماژول از نوع html سفارشی بسازید

و کدهای html درون اون کپی کنید

و پوزیشن اونو مثل پوزیشنی که به mod_flexi_customcode دادید باشه

توضیحات تغییرات سایز تصاویر منو و .... در کدهای css موجود هست

یا علی حق نگهدار

[Vahid Taheri 74]

با تشکر از شما بدلیل قرار دادن این کد

البته برای جوملا میتونید از افزونه ی زیر استفاده کنید که رایگان هم هست:

Art CSS Dock

افزونه های مشابهش هم هست که تجاری هستند

[webtaweb.ir 13]

خواهش میکنم

این افزونه رو من استفاده کردم و لی قالبم مشکل پیدا کرد

استفاده از کد برای کسانی که با ماژول منو تصویری مشکل دارند پیشنهاد می شود