عرض مشاركة واحدة
قديم 08-11-2012, 02:04 AM   #1
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
Thumbs up إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

السلام عليكم
بعد طلب الأخ ياسين بتعريب قائمة
Stylish Apple Mac Style Drop Down Menu With Search Box Preview!

أتمنى أن أكون وفقت في ذلك

مثال للمعاينة : مدونة تجريبية

صورة للقائمة :



اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن ]]></b:skin>، أضف قبلها مباشرة :

كود PHP:
#imenu {
    
background: -moz-linear-gradient(center top #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
    
bordermedium none;
    
border-radius4px 4px 4px 4px;
    
box-shadow1px 1px 3px rgba(0000.2), 1px 1px 3px rgba(0000.2inset;
    
color#FFFFFF;
    
margin-bottom15px;
    
margin-right0;
    
overflowvisible;
    
text-decorationnone;
    
text-shadow: -1px -1px 0 rgba(0000.15);
}
#halfnav {
    
floatleft;
}
#halfnav ul, #halfnav ul li {
    
displayinline;
    list-
stylenone outside none;
    
margin0;
    
padding0;
}
#halfnav ul li a {
    
background: -moz-linear-gradient(center top #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
    
border1px solid #666666;
    
border-radius4px 4px 4px 4px;
    
color#FFFFFF;
    
displayinline-block;
    
font-familyTahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size16px;
    
line-height20px;
    
margin5px;
    
padding5px;
    
text-decorationnone;
    
text-shadow-1px 1px rgba(0000.28);
}
#halfnav ul li a:hover {
    
backgroundnone repeat scroll 0 0 #444444;
    
border1px solid #222222;
}
#halfnav .current-menu-item a {
    
border1px solid #000000;
}
#nav {
    
positionrelative;
    
z-index2000;
}
#nav .parent > a, #nav .parent > a:hover {
    
background-imageurl("../images/arrow.png");
    
background-positionleft center;
    
background-repeatno-repeat;
}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover {
    
background-imageurl("../images/arrow-left.png");
    
background-positionleft center;
    
background-repeatno-repeat;
}
#nav ul, #nav ul li {
    
displayinline;
    list-
stylenone outside none;
    
margin0;
    
padding0;
}
#nav ul li a {
    
border-left1px solid #777777;
    
color#FFFFFF;
    
displayinline-block;
    
font-familyTahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size14px;
    
line-height36px;
    
margin-right: -4px;
    
padding0 15px;
    
text-decorationnone;
    
text-shadow1px 1px 1px #333333;
}
#nav ul li a:hover {
    
backgroundnone repeat scroll 0 0 #444444;
}
#nav .current-menu-item a {
    
color#CCCCCC;
}
#nav .current-menu-item .sub-menu a {
    
color#FFFFFF;
    
text-shadow1px 1px 1px #333333;
}
#nav .menu > li:first-child a:hover {
    
border-radius0 0 0 0;
}
#nav .menu .sub-menu li a:hover {
    
border-radius0 0 0 0;
}
#nav ul li {
    
positionrelative;
}
#nav li ul {
    
displaynone;
    
right7px;
    
positionabsolute;
    
top27px;
}
#nav li ul a {
    
backgroundnone repeat scroll 0 0 #555555;
}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
right0;
    
margin: -37px 0 11px 180px;
}
#nav ul li:hover ul {
    
displayinline-block;
}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul {
    
margin-top:9px;
    
margin-right:-10px;
    
displaynone;
}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
displayblock;
}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a {
    
border1px solid #777777;
    
margin: -1px 0 0 -11px;
}
#nav ul li:hover ul li a {
    
padding0 14px;
    
width150px;
}
#nav ul ul li:hover ul li a {
    
background-color#888888;
    
padding0 14px;
    
width150px;
}
#nav ul ul ul li:hover ul li a {
    
background-color#AAAAAA;
    
padding0 14px;
    
width150px;
}
#nav .children {
    
z-index4000;
}
#home {
    
border-left1px solid #777777;
    
floatright;
    
height36px;
    
margin-right4px;
    
margin-left15px;
}
#home a:hover {
    
opacity0.5;
}
#nohome {
    
floatright;
    
height35px;
    
margin-right5px;
    
margin-left4px;
}
.
searchform {
    
backgroundnone repeat scroll 0 0 #FFFFFF;
    
border-radius15px 15px 15px 15px;
    
box-shadow0 0 1px #222222 inset;
    
floatleft;
    
height20px;
    
margin7px 20px 5px 10px;
    
padding0;
    
width160px;
}
.
center .searchform {
    
floatnone;
}
#morefoot .searchform {
    
floatright;
}
.
searchform .{
    
bordermedium none;
    
color#333333;
    
font-size12px;
    
height14px;
    
margin3px 15px 2px 20px;
    
overflowhidden;
    
width130px;
}
#magnify {
    
floatright;
    
margin2px 0 0 5px;
    
positionabsolute;
}
#magnify {
}
.
searchform .s:focus {
    
bordermedium none;
    
outline0 none;
}
.
searchform .searchsubmit {
    
displaynone;
}
.
row {
    
margin0 auto;
    
max-width980px;
    
min-width727px;
    
width100%;
}
.
row .row {
    
min-width0;
}

.
column, .columns {
    
floatright;
    
margin-right4.4%;
    
min-height1px;
    
positionrelative;
}
.
column:first-child, .columns:first-child {
    
margin-right0;
}
[class*=
"column"] + [class*="column"]:last-child {
    
floatleft;
}

.
row .three {
    
width21.679%;
}
.
row .nine {
    
width73.9%;
}
.
row .ten {
    
width82.6%;
}
.
row .twelve {
    
width100%;


الآن اذهب إلى التخطيط (عناصر الصفحة) وأضف أداة HTML/JavaScript والصق الكود التالي وعدل ما يناسبك :

كود PHP:
<div class="container">
        <
div class="row">
            <
div class="twelve columns" id="imenu">
            <
div id="nav" class="nine columns">
             <
div id="home"><a href="http://www.bloggerexp.com"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/home.png" alt="home" /></a></div>                           
     <
ul id="nav_menu">
        <
li><a href="http://www.bloggerexp.com">بلوجر</a>
             <
ul>
                 <
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=5'>قوالب بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=7'>تعريب قوالب بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=10'>إضافات بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=11'>دروس بلوجر</a></li>
             </
ul>
         </
li>
         <
li><a href="http://www.bloggerexp.com/">معهد خبراء بلوجر</a>
             <
ul>
                 <
li><a href="http://www.bloggerexp.com/forumdisplay.php?f=4">قوالب بلوجر</a></li>
                 <
li><a href="http://www.bloggerexp.com/forumdisplay.php?f=9">الدعم الفني</a></li>
             </
ul>
         </
li>
         <
li><a href="http://www.bloggerexp.com">من نحن ؟</a></li>
         <
li><a href="http://www.bloggerexp.com/sendmessage.php">راسلنا</a></li>

    </
ul>               </div>
                            <
div class="three columns">

 <
form method="get" class="searchform" action="http://marvblues.com/">
     <
div id="magnify"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/magnify.png" alt="magnify" /></div>
     <
div><input name="s" class="s" value="بحث" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text" /></div>
     <
div><input class="searchsubmit" value="" type="submit" /></div>
 </
form>            </div>
                     </
div>
     </
div>
 </
div

غير مسجل لا أسامح بنقل الإضافة دون ذكر المصدر.

غير مسجل إذا أعجبتك الإضافة لا تبخل علينا بالنقر على زر أعجبني للفيسبوك أسفله.

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس