قالب مدون: قائمة css فى قمة الأناقة لمدونات بلوجر

قائمة css فى قمة الأناقة لمدونات بلوجر

بسم الله الرحمن الرحيم

أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .

لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها

<style>
 /* by.mdwanblog.blogspot.com */
 #cssmenu {
 padding: 0;
 margin: 0;
 border: 0; }
 #cssmenu ul, #cssmenu li {
 list-style: none;
 margin: 0;
 padding: 0; }
 #cssmenu ul {
 position: relative;
 z-index: 597; }
 #cssmenu ul li {
 float: right;
 min-height: 1px;
 vertical-align: middle; }
 #cssmenu ul li.hover,
 #cssmenu ul li:hover {
 position: relative;
 z-index: 599;
 cursor: default; }
 #cssmenu ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%; }
 #cssmenu ul ul li {
 float: none; }
 #cssmenu ul ul ul {
 top: 0;
 left: auto;
 right: -99.5%; }
 #cssmenu ul li:hover > ul {
 visibility: visible; }
 #cssmenu ul ul {
 bottom: 0;
 left: 0; }
 #cssmenu ul ul {
 margin-top: 0; }
 #cssmenu ul ul li {
 font-weight: normal; }
 #cssmenu a {
 display: block;
 line-height: 1em;
 text-decoration: none; }
 /* by.mdwanblog.blogspot.com */
 #cssmenu {
 background: #333;
 border-bottom: 4px solid #1b9bff;
 font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 font-size: 12px; }
 #cssmenu > ul {
 *display: inline-block; }
 #cssmenu:after, #cssmenu ul:after {
 content: '';
 display: block;
 clear: both; }
 #cssmenu ul {
 text-transform: uppercase; }
 #cssmenu ul ul {
 border-top: 4px solid #1b9bff;
 text-transform: none;
 min-width: 190px; }
 #cssmenu ul ul a {
 background: #1b9bff;
 color: #FFF;
 border: 1px solid #0082e7;
 border-top: 0 none;
 line-height: 150%;
 padding: 16px 20px; }
 #cssmenu ul ul ul {
 border-top: 0 none; }
 #cssmenu ul ul li {
 position: relative; }
 #cssmenu ul ul li:first-child > a {
 border-top: 1px solid #0082e7; }
 #cssmenu ul ul li:hover > a {
 background: #35a6ff; }
 #cssmenu ul ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 -moz-box-shadow: 0 1px 0 #1b9bff;
 -webkit-box-shadow: 0 1px 0 #1b9bff;
 box-shadow: 0 1px 0 #1b9bff; }
 #cssmenu ul ul li:last-child:hover > a {
 -moz-border-radius: 0 0 0 3px;
 -webkit-border-radius: 0 0 0 3px;
 border-radius: 0 0 0 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; }
 #cssmenu ul ul li.has-sub > a:after {
 content: '+';
 position: absolute;
 top: 50%;
 right: 15px;
 margin-top: -8px; }
 #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
 background: #1b9bff;
 color: #FFF; }
 #cssmenu ul li.has-sub > a:after {
 content: '+';
 margin-left: 5px; }
 #cssmenu ul li.last ul {
 left: auto;
 right: 0; }
 #cssmenu ul li.last ul ul {
 left: auto;
 right: 99.5%; }
 #cssmenu a {
 background: #333;
 color: #CBCBCB;
 padding: 0 20px; }
 #cssmenu > ul > li > a {
 line-height: 48px; }
</style>

 <div id='cssmenu'>
 <ul>
 <li class='active'><a href='#'>الرئيسية</a></li>
 <li class='has-sub'><a href='#'>منسدلة</a>
 <ul>
 <li class='has-sub'><a href='#'>رابط</a>
 <ul>
 <li><a href='#'>رابط</a></li>
 <li class='last'><a href='#'>مدونة مدون</a></li>
 </ul>
 </li>
 <li class='has-sub'><a href='#'>منسدلة اخرى</a>
 <ul>
 <li><a href='#'>جديد</a></li>
 <li class='last'><a href='#'>هاكات بلوجر</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href='#'>عن مدوّن</a></li>
 <li class='last'><a href='#'>بلوجر</a></li>
 </ul>
 </div>
 