اضافة قائمة الفيس بوك متوافقة مع جميع الاجهزة

اضافة قائمة شبيهة للفيس بوك متوافقة مع جميع الاجهزة النقالة و اجهزة الكمبيوتر ,مدونة مدون محترف اضافات بلوجر ,قوالب بلوجر ,دروس بلوجر ,مدون محترف

درس اليوم في مدون محترف انشاء قائمة الفيس بوك الاحترافية و دون شك استجابة التكنولوجيا اصبحت اكثر و اكثر شعبية لذلك
اليوم سوف نقوم بانشاء قائمة علوية جديدة متوافقة مع جميع الاجهزة النقالة و اجهزة الكمبيوتر و القائمة تشبه قائمة فيس بوك

معاينة

شرح التركيب

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

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #E9EAED;
    height: 100%;
}
body {
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}

/* other elements */
#nav_v2 {
    display: none;
}
/* top level elements */
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: rgb(78,105,162);
    background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -webkit-gradient(right top, right bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
    background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);

    border-bottom: 1px solid #3A4B7B;
    height: 22px;
    padding: 10px 0 10px 5px;
    position: relative;
}
#nav > li {
    float: right;
    height: 22px;
    padding-left: 6px;
    position: relative;
    text-align: right;
}
#nav > li > a {
    border: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: -3px 0 0 -1px;
    padding: 0 11px 0 1px;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #425691;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    margin-left: -8px;
    padding: 0 11px 0 9px;
    position: relative;
    z-index: 1;
}
#nav > li.subs:hover > a {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-bottom-width: 0;
    border-radius: 2px 2px 0 0;
    color: #000000;
    text-shadow: 0 0 transparent;
    z-index: 2;
}
/* top items separator */
#nav > li:after {
    background-color: #405791;
    content: "";
    height: 17px;
    right: 1px;
    position: absolute;
    top: 2px;
    width: 1px;
}
#nav > li:first-child:after {
    background-color: transparent;
}
/* submenu */
#nav ul {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    *border: 1px solid rgb(100, 100, 100);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    display: none;
    right: -1px;
    margin-top: 2px;
    min-width: 200px;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    z-index: 1;
}
#nav li:hover ul {
    display: block;
}
#nav ul li a {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    color: #232B37;
    display: block;
    font-size: 12px;
    line-height: 20px;
    padding: 0 22px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav ul li a:hover {
    background-color: #6D84B4;
    border-bottom: 1px solid #3B5998;
    border-top: 1px solid #3B5998;
    color: #FFFFFF;
}
/* responsive rules */
@media all and (max-width : 980px) {

    #nav {
        display: none;
    }
    #nav_v2 {
        background-color: rgb(78,105,162);
        border: 1px solid #3A4B7B;
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        margin-bottom: 30px;
        padding: 6px;
        width: 100%;
    }
    #nav_v2 select {
        color: #FFFFFF;
        cursor: pointer;
    }
}

الان نبحث عن هذا الكود </head>و فوقه نضيف الكود التالي

<ul id='nav'>
    <li><a href='#'>الرئيسية</a></li>
    <li class='subs'><a href='#s1'>قائمة 1</a>
        <ul>
            <li><a href='#'>تعديل A</a></li>
            <li><a href='#'>تعديل B</a></li>
            <li><a href='#'>تعديل C</a></li>
            <li><a href='#'>تعديل D</a></li>
        </ul>
    </li>
    <li class='subs'><a href='#s2'>قائمة منسدلة 2</a>
        <ul>
            <li><a href='#'>تعديل E</a></li>
            <li><a href='#'>تعديل F</a></li>
            <li><a href='#'>تعديل G</a></li>
            <li><a href='#'>تعديل H</a></li>
        </ul>
    </li>
    <li><a href='#'>تعديل 3</a></li>
    <li><a href='#'>تعديل 4</a></li>
    <li><a href='#'>تعديل 5</a></li>
    <li><a href='http://mudwnp.blogspot.com/2014/06/facebook-like-menu-responsive.html/'>Back to Responsive menu tutorial</a></li>
</ul>

اهم الاعدادات

نقوم باستبدال ما هو باللون الازرق # برابط القسم الخاص بك
نقوم باستبدال ما هو باللون الاحمر تعديل باسم القسم الخاص بك

يمكنك ايضا مشاهدة : اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

في امان الله

الموضوع من قسم:

تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

عن المدونة

مــﮂۅنــﮤ إﭰـڵـٱمـ مــﯾ̃ـڪس مـﮂۅنﮤ عـږﭜﯾ̃ﮤ مـﭰﭤۅحﮤ ﮂٱڵـﮤ عـڵــے ٱسمـھٱ، ږٱـۓﮂﮤ ۅمـﭤمـﯾ̃ژﮤ عـن ڠـﯾ̃ږھٱ ﭤھﭤمـ ﭜڪڵـ مـٱ ھۅ چﮂﯾ̃ﮂ ﭰﯾ̃ عـٱڵـمـ ٱڵـمـعـڵـۅمـﯾ̃ٱﭤ ، ﭤڦـﮂمـ ﮂږۅس ۅ شږۅحٱﭤ ﯾ̃ۅمـﯾ̃ٱ ڪڎڵـڪ حڵـ مـشٱڪڵـ ٱڵـمـﭤٱﭜعـﯾ̃ن ﯾ̃ﭤمـ ٱڵـﭤطږڦـ ﭰﯾ̃ھٱ إڵــے مـڂـﭤڵـﭰ ٱڵـمـۅٱڞـﯾ̃عـ ٱڵـﭤڦـنﯾ̃ﮤ ٱڵـڦـږﯾ̃ﭜﮤ مـن ٱڵـشﭜٱﭜ ٱڵـعـږﭜﯾ̃ ، ڵـمـن ﯾ̃ږﯾ̃ﮂ ﭤﭤﭜعـ ڪڵـ مـٱ ھۅ چﮂﯾ̃ﮂ ﭰﯾ̃ عـٱڵـمـ ٱڵـﭤڦـنﯾ̃ﮤ ۅٱڵـمـعـڵـۅمـﯾ̃ٱﭤ ۅڪڵـ مـٱ ﯾ̃ڂـڝـ ٱڵـﭤڦـنﯾ̃ﮤ مـن مـمـﯾ̃ژٱﭤ ٱڵـمـﮂۅنﮤ ڪڎڵـڪ ٱنھٱ ﭤھﭤمـ ﭜﭤڦـﮂﯾ̃مـ ﭜعـڞـ ٱڵـٱﭰڵـٱمـ ٱڵـعـږﭜﯾ̃ﮤ ۅٱڵـڠـږﭜﯾ̃ﮤ ۅٱڵـﭰﯾ̃ﮂﯾ̃ۅ ڪڵـﯾ̃ﭜ مـنھٱ ٱڵـٱﭰڵـٱمـ ٱڵـڦـﮂﯾ̃مـﮤ ۅمـنھٱ ٱڵـحﮂﯾ̃ﺛ ٱڵـڎـے ﯾ̃سﭤحڦـ ٱڵـمـشٱھﮂﮤ