قائمة افقية ذات اقسام منسدلة

قائمة افقية ذات اقسام منسدلة

طريقة التركيب

1- إذهب إلى لوحة التحكم .

2- نضغط على كلمة تخطيط من القائمة الجانبية .

3- يتم الضغط على إضافة أداء جديدة ثم نختار الأداة HTML/Java Script

وذلك كما هو موضح بالصورة التالية :

4- بعد أن نختار الأداة HTML/Java Script نضع بداخلها هذا الكود التالي

، مع مراعاة تغير " طيبة مصرية " بالروابط التي ترغب أن يتم فتحها من تلك القائمة إن شاء الله :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" />

</head>
<body style="background-color:#EBEBEB">
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a class="pressed" href="#" title="الرئيسية" style="height:16px;line-height:16px;">الرئيسية</a></li>
<li class="topmenu"><a href="#" title="طيبة مصرية" style="height:16px;line-height:16px;">طيبة مصرية</a></li>
<li class="topmenu"><a href="#" title="طيبة مصرية" style="height:16px;line-height:16px;"><span>طيبة مصرية</span></a>
    <ul>
<li class="subfirst"><a href="#" title="Item 1 0">Item 1 0</a></li>
<li><a href="#" title="Item 1 1">Item 1 1</a></li>
<li class="sublast"><a href="#" title="Item 1 2">Item 1 2</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="طيبة مصرية" style="height:16px;line-height:16px;">طيبة مصرية</a></li>
<li class="topmenu"><a href="#" title="طيبة مصرية" style="height:16px;line-height:16px;">طيبة مصرية</a></li>
<li class="topmenu"><a href="#" title="طيبة مصرية" style="height:16px;line-height:16px;">طيبة مصرية</a></li>
</ul>
<p style="display:none">
<a href="http://css3menu.com/">Make CSS Menu Css3Menu.com</a></p>
</body>
</html>

ثم

1- ندخل الى لوحة تحكم المدونة .

2- نضغط على كلمة قالب من القائمة الجانبية مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:

ومن تلك الصورة السابقة نضغط على تحرير HTML ، لكي يظهر لنا الصورة التالية:

3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

ونبحث عن كلمة ]]></b:skin> ونضع قبلها هذا الكود

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;border-width:1px;border-style:solid;border-color:#B4B4B4;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
    display:none;position:absolute;right:0;top:100%;padding:0;background-color:#dddddd;background-image:url("subbk.png");border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li:hover{
    position:relative;}
ul#css3menu1 ul ul{
    position:absolute;right:100%;top:0;}
ul#css3menu1{
    padding:6px 6px 6px 0;display:block;font-size:0;float:right;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:right;}
ul#css3menu1>li,ul#css3menu1 li{
    margin:0 0 0 6px;}
ul#css3menu1 ul>li{
    margin:6px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
    display:block;vertical-align:middle;text-align:right;text-decoration:none;font:bold 14px Arial;color:#666666;cursor:pointer;}
ul#css3menu1 ul li{
    float:none;margin:0;}
ul#css3menu1 ul a{
    text-align:right;}
ul#css3menu1 li:hover>a{
    background-color:#ffaa00;border-color:#F8F8F8;border-style:solid;font:bold 14px Arial;color:#ffffff;text-decoration:none;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{
    display:none;}
ul#css3menu1 li:hover > a img.def{
    display:none;}
ul#css3menu1 li:hover > a img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.def{
    display:none;}
ul#css3menu1 a{
    padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#666666;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#ffaa00;border-style:solid;border-color:#F8F8F8;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
    height:16px;background-color:;background-image:none;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 20px Arial;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000000;line-height:16px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
    background-color:#f77b00;background-image:url("mainbk.png");background-position:0 100%;border-style:solid;border-color:#F8F8F8;font:bold 20px Arial;color:#444444;text-decoration:none;text-shadow:0 1px 0 #FFFFFF;line-height:16px;}
ul#css3menu1 li.subfirst>a{
    border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-right-radius:9px;}

4- نضغط على زر حفظ التغيرات لكي يتم حفظ القالب .

جزى الله خيرا كل من ساهم فيه