-->

الان كود علامة تبويب منسدلة بتقنية css3 والجيكوري

الان كود علامة تبويب منسدلة بتقنية css3 والجيكوري

    والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
    السلام عليكم ورحمة الله وبركاته .

    درس عمل علامات تبويب منسدلة بالـ css3 والجيكوري

    موضوع اليوم جميل وسهل انشاءالله , وهي قائمة على شكل علامات تبويب يبحث عنها الكثير  , وتستطيع ان تضع داخلها جملة او اي ماتشاء , الاداة سهلة الاستخدام والتصميم ايضاَ قمت بتحويلها من اللغة الانقليزيه الى العربيه مع بعض التعديلات كي تتناسب تماما مع المحتوى العربي من حيث اتجاه النص ولونه وحجم الخط ونوعه .



    صورة : 

    درس عمل علامات تبويب منسدلة بالـ css3 والجيكوري
    درس عمل علامات تبويب منسدلة بالـ css3 والجيكوري

    مثال مباشر : 

    من هنا

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


    • ادخل التخطيط .
    • اختر اضافة اداة , وتكون عبارة عن html/javascript 
    • الصق فيها هذا الكود مع تغير مايلزم : 


    <div id="container">
    <ul class="menu">
    <li id="news" class="active">اخبار</li>
    <li id="tutorials">تعليمات</li>
    <li id="links">روابط</li>
    </ul>
    <span class="clear"></span>
    <div class="content news">
    <ul>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر تطلق خدمة جوجل ادورز</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> تستطيع الربح من خلال اضافة ادسنس لمدونتك.</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> تطويرات قدامه قوية لمدونات بلوجر.</li>
    <ul>
    </div>
    <div class="content tutorials">
    <ul>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر قريباَ ستبداء في تطوير شكل لوحة التحكم</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> ابداء مدونتك الحرة في بلوجر .!</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر تتيح لك نطاق مجاني واستضافة مجانيه.</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> عالم التدوين اسهل في بلوجر</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> خدمة بلوجر هي خدمة سهله لكل مدون مبتداء.</li>
    <ul>
    </div>
    <div class="content links">
    <ul>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
    <li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
    <ul>
    </div>
    </div>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="https://jetara.googlecode.com/svn/trunk/tabs.js"></script>

    <style>
    @CHARSET "UTF-8";
    /******* GENERAL RESET *******/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
    font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
     tfoot, thead, tr, th, td {
    margin:0pt;
    padding:0pt;
    }
    .clear{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
    }
    a{
    text-decoration: none;
    }
    #container {
    margin: 2px auto;
    max-width: 300px;
    }
    #container ul{
    list-style: none;
    list-style-position: outside;
    }
    #container ul.menu li{
    float: left;
    margin-right: 5px;
    margin-bottom: -1px;
    }
    #container ul.menu li{
    font-weight: 700;
    display: block;
    padding: 5px 10px 5px 10px;
    background: #efefef;
    margin-bottom: -1px;
    border: 1px solid #d0ccc9;
    border-width: 1px 1px 1px 1px;
    position: relative;
    color: #898989;
    cursor: pointer;
    }
    #container ul.menu li.active{
    background: #fff;
    top: 1px;
    border-bottom: 0;
    color: #5f95ef;
    }
    .content{
    margin: 0pt auto;
    background: #efefef;
    background: #fff;
    border: 1px solid #d0ccc9;
    text-align: right;
    padding: 10px;
    padding-bottom: 20px;
    font-size: 11px;
    }
    .content h1{
    line-height: 1em;
    vertical-align: middle;
    height: 48px;
    padding: 10px 10px 10px 52px;
    font-size: 32px;
    }
    .content.news{
    display: block;
    }
    .content.tutorials{
    display: none;
    }
    .content.links{
    display: none;
    }
    .content.links a{
    color: #5f95ef;
    }
    div#container li {
    direction: rtl;
    }
    div#container {
    font: 12px tahoma,arial;
    color: #333;
    }
    </style>

     طبعاَ الاشياء التي تحتاج ان تستبدلها هي التي بالعربي , موفقين :)
    Pepsi Gaming
    @مرسلة بواسطة
    Pepsi Gaming مدون ويوتيوبر مصرى اعمل نشر اخر اخبار الالعاب الالكترونية وشرح ثغرات الالعاب

    إرسال تعليق