إعلانات نصية

تحميل لعبة gta v

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

أعلن هنا

  • طريقة عمل قائمة افقية منسدلة ل3 مستويات

    اليوم ساقوم بشرح كيفة عمل قائمة افقية منسدلة باستخدام فقط CSS
    1- اولا سنقوم بعمل id داخل div ونسميه علي سبيل المثال navigation
    [CODE][<div id="navigation">
    </div>/CODE]

    2-الان سنقوم بإنشاء اول مستوي للقائمة :
    رمز Code:
    <div id="navigation">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>

    3-وسنملئها ببعض اسماء الروابط مثال home..links..
    رمز Code:
    <div id="navigation">
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>FAQ</li>
    <li>News</li>
    </ul>
    </div>

    هذا مثال كيف سيصبح شكل القائمة :



    5-كود ال CSS للمستوي الاول للقائمة :
    رمز Code:
    #navigation { font-size:0.75em; width:150px; }
    #navigation ul { margin:0px; padding:0px; }
    #navigation li { list-style: none; }

    ul.top-level { background:#666; }
    ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
    }

    #navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;
    text-decoration:none;
    width:100%;
    }

    #navigation a:hover{
    text-decoration:underline;
    }

    #navigation li:hover {
    background: #f90;
    position: relative;
    }

    هذا مثال كيف سيصبح شكل القائمة :


    6-والان سنقوم بعمل المستوي الثاني للقائمة :
    رمز Code:
    <div id="navigation">
    <ul class="top-level">
    <li><a href="#">Home</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a></li>
    <li><a href="#">Sub Menu Item 2</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li>
    <a href="#">FAQ</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
    </li>
    <li>
    <a href="#">News</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a></li>
    <li><a href="#">Sub Menu Item 2</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
    </li>
    </ul>
    </div>

    7- والخطوة القادمة التعديل عليها بال CSS :

    رمز Code:
    ul.sub-level {
    display: none;
    }

    li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
    }

    ul.sub-level li {
    border: none;
    float:left;
    width:150px;
    }

    وستصبح القائمة بهذا الشكل :



    8-وهذا الشكل النهائي لكود html للقائمة بثلاث مستويات :

    رمز Code:
    <div id="navigation">
    <ul class="top-level">
    <li><a href="#">Home</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a>
    </li>
    <li><a href="#">Sub Menu Item 2</a>
    <ul class="sub-level">
    <li><a href="#">Sub Sub Menu Item 1</a></li>
    <li><a href="#">Sub Sub Menu Item 2</a></li>
    <li><a href="#">Sub Sub Menu Item 3</a></li>
    <li><a href="#">Sub Sub Menu Item 4</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Menu Item 3</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li>
    <a href="#">FAQ</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a></li>
    <li><a href="#">Sub Menu Item 3</a>
    <ul class="sub-level">
    <li><a href="#">Sub Sub Menu Item 1</a></li>
    <li><a href="#">Sub Sub Menu Item 2</a></li>
    <li><a href="#">Sub Sub Menu Item 3</a></li>
    <li><a href="#">Sub Sub Menu Item 4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">News</a>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a>
    <ul class="sub-level">
    <li><a href="#">Sub Sub Menu Item 1</a></li>
    <li><a href="#">Sub Sub Menu Item 2</a></li>
    <li><a href="#">Sub Sub Menu Item 3</a></li>
    <li><a href="#">Sub Sub Menu Item 4</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Menu Item 2</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
    </li>
    </ul>
    </div>

    9-واخيرا نضع اخر اضافات لل CSS للتعديل علي المستوي الثاني والثالث :

    رمز Code:
    /*Seconda Level*/
    #navigation .sub-level {
    background: #999;
    }

    /*Third Level*/
    #navigation .sub-level .sub-level {
    background: #09C;
    }


    /*RESET STYLES*/
    li:hover .sub-level .sub-level {
    display:none;
    }

    .sub-level li:hover .sub-level {
    display:block;
    }



    وبهذا نكون قد انتهينا من عمل القائمة بهذا الشكل .. وتستطيع التعديل عليها كما احببت بالالوان والشكل ..
    هذه المقالة نشرت أصلا في موضوع المنتدى : طريقة عمل قائمة افقية منسدلة ل3 مستويات كتبت بواسطة admin مشاهدة المشاركة الأصلية
  • Hotwire Widget