درس اليوم هو
إضافة قائمة منسدلة بتقنية css إلى مدونات بلوجر
والآن بسم الله نبدأ شرح التركيب
سجل الدخول إلى مدونتك ثم اتقل إلى تصميم- ثم تحرير كود html
وبعد ابحث عن هذا الكود:
]]></b:skin>
]]></b:skin>
ثم اضف قبله
/*Start Css Menu*/
.menu{border:none;border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLcRM_e3nVuFso0OHqNo60YnY_XiO3yQzcAWzYwPN0i99OQS8Lbb-eOPpGyuaHPL7hQ-cRg-_4B8mI7PICx-MZFVvqP8UoAycXAX3xBm7B2Z7CWQOCm7OQkQI7XzHgvhrKzRrxjATl9KF/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbl6Zdrfdy4Awm6-O__g69NPn4VaWuY4EDylUUS8EpbR3gXOp6LQnwYpckoDbyG-Dh6sQxEYadW_x14IRZhnXKE3TDS4N5ITqyOEwKCElbSAB5Fx874OCVxCLb1wyeNtwgfXOjSgl4AcBZ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/*End Css Menu from http://www.mydz.info/vb*/
ثم احفظ
ثم انتقل إلى عناصر الصفحة كم في الصورة
ثم ضف هذا الكود
<div class="menu">
<ul><li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
الشرح:
أضفت هذا الشرح بسبب سؤال أحد المدوننين
مثلا هذا الكود:
<li><a href="#">Drop Down CSS Menus</a></li>
مكان هذه العلامة # ضع رابط الموضوع أو رابط القسم
ومكان هذا الكلام Drop Down CSS Menus ضع اسم أو عنوان الموضوع أو القسم
ليصبح مثلا:
<li><a href="http://estafid.blogspot.com/p/blog-page_15.html">تبادل إعلاني</a></li>
مثلا هذا الكود:
<li><a href="#">Drop Down CSS Menus</a></li>
مكان هذه العلامة # ضع رابط الموضوع أو رابط القسم
ومكان هذا الكلام Drop Down CSS Menus ضع اسم أو عنوان الموضوع أو القسم
ليصبح مثلا:
<li><a href="http://estafid.blogspot.com/p/blog-page_15.html">تبادل إعلاني</a></li>
ثم انتهى
ومبروك عليك الإضافة.
6:45 م | 0
التعليقات | واصل القراءة
