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

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

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

معاينة

شرح التركيب

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

* {
    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;
    }
}

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

الرئيسية


قائمة 1



تعديل A


تعديل B


تعديل C


تعديل D






'#s2'>قائمة منسدلة 2



تعديل E


تعديل F


تعديل G


تعديل H






تعديل 3


تعديل 4


تعديل 5


Back to Responsive menu tutorial

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

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

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

في امان الله

مدونة مدون محترف

Unknown

اضف تعليق

اضافات بلوجر, CSS, Menu

الاثنين، 23 يونيو 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

شرح التركيب

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

عن الكاتب مدون محترف

مقالات قد تهمك