اهلا وسهلا بك في منتديات المجد الجزائري
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.



آخـر المواضيع المضافة
شارك اصدقائك شارك اصدقائك كود وضع حقوق نصية اسفل المنتدى لمصممي الاستايلات
شارك اصدقائك شارك اصدقائك [ Css ] حصرى كود css وضع صورة بجانب المجموعات
شارك اصدقائك شارك اصدقائك جميع القنوات المجانية والمشفرة بين يديك وبأنترنت ضعيفة
شارك اصدقائك شارك اصدقائك افضل تطبيق اندرويد يمكن استخدامه للمراقبة والتجسس
شارك اصدقائك شارك اصدقائك تطبيق KMPlayer Pro 2.1.0 المدفوع للاندرويد [اخر اصدار]
شارك اصدقائك شارك اصدقائك تطبيق MX Player Pro v1.8.9 المدفوع افضل برنامج مشاهده فديوهات وتنزيل ترجمه الافلام ايضا للاندرويد [اخر اصدار]
شارك اصدقائك شارك اصدقائك تطبيق مسجل الفيديو السري Secret Video Recorder Pro v1.2.3.0 مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تسريع الهاتف Phone Speed Booster Pro v1.5 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Photo Mate R2 v4.2.3 للتعديل الصور مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Chrooma Keyboard - Emoji PRO v3.0.1 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Floating Apps (multitasking) v3.6.8 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Retrica Pro v3.4.1 للانشاء تاثيرات رائعة على صورك النسخة المدفوعة مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تحرير النصوص VLk Text Editor PRO v1.8.5 النسخة المدفوعة مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Adobe Photoshop Express Premium v3.1.42 لمعالجة الصور النسخة المدفوعة للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تحرير الصوت Voice PRO - HQ Audio Editor v3.3.16 النسخة المدفوعة مجانا للاندرويد
الخميس يناير 04, 2018 2:38 pm
الخميس يناير 04, 2018 2:35 pm
الثلاثاء نوفمبر 28, 2017 8:10 am
الجمعة أكتوبر 13, 2017 10:35 pm
الأربعاء نوفمبر 02, 2016 6:53 pm
الأربعاء نوفمبر 02, 2016 6:10 pm
الخميس أكتوبر 20, 2016 8:16 am
الخميس أكتوبر 20, 2016 8:15 am
الخميس أكتوبر 20, 2016 8:11 am
الخميس أكتوبر 20, 2016 8:10 am
الخميس أكتوبر 20, 2016 8:09 am
الخميس أكتوبر 20, 2016 8:08 am
الخميس أكتوبر 20, 2016 8:07 am
الخميس أكتوبر 20, 2016 8:06 am
الخميس أكتوبر 20, 2016 8:05 am
 

أضف إهدائك

Admin قال تحميل جي بي واتساب 4.05 و واتساب بلس بميزة ترجمة الرسائل – تحديث
الأربعاء فبراير 24, 2016 8:21 am ...
:
[url=http://arabitechnomedia.com/wp-content/uploads/2016/02/Untitled-1-3.jpg][img(696px,348px):10bf]…[/img(696px,348px):10bf]
يجب تسجيل الدخول لنشر الرسائل
اسم الدخول:كلمة السر:
قم بتسجيلي تلقائيا كل:

:: نسيت كلمة السر


hossam123 :: دعم منتديات احلى منتدى :: اكواد CSS

شاطر

رقم المشاركة : [ 1 ]
قديمالجمعة سبتمبر 16, 2011 3:40 pm
Admin
Admin
avatar


Time Online :
1d 20h 25m 49s

عدد المساهمات :
279

تاريخ التسجيل :
04/07/2011

الماجيك مسعد will become famous soon enoughالماجيك مسعد will become famous soon enough
غير متواجد
مُساهمةموضوع: قائمة منسدلة غاية في الروعه والجمال


قائمة منسدلة غاية في الروعه والجمال


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

وهي منفذة بال css مع تأثير Jqeury و ال html

مثال مباشر

وهذا ملف ال css

الكود:
body {
    background:#E5F0FF none repeat scroll 0 0;
    color:#595959;
    font-family: Traditional Arabic, Arial;
text-align: right;
    font-weight: bold;
    font-size: 14px;
}
ul, li{
    padding: 0px;
    margin: 0px;
}
ul.dropmenu{
    position: relative;
    margin: 0px;
    padding: 1px 0px 0px 0px;
    background:transparent url(images/navigation.png) repeat-x scroll 0 0;
    display:block;
    height: 35px;
    font-family: Traditional Arabic, Arial;
text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.dropmenu li{
    position: relative;
    list-style: none;
    float: right;
    margin: 0px;
    padding: 0px;
}
.dropmenu li a{
    height: 22px;
    padding: 9px 30px 0px 15px;
    display: block;
    cursor: point;
    border-right: solid 1px #4a779d;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.dropmenu li span{
    display: block;
    float: left;
    height: 10px;
    width: 10px;
    background:transparent url(images/arrow_up.png) repeat-x scroll 0 0;
    position: absolute;
    top: 12px;
    right: 10px;
}
.dropmenu li  a:hover span{
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
    display: block;
}
.dropmenu ul{
    position: absolute;
    display: none;
    width: 140px;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #ccc;
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
    border: 0;
    float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
    color: #0657AD !important;
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
    color:#F67A00 !important;
    text-decoration: none;
    background-color: #F0F0F0;
    background-image: none;
}
.dropmenu div ul{
    position: relative;
    display: block;
}
.dropmenu li div{
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
    border: 1px solid #ccc;
    padding: 5px;
    display: none;
    position: absolute;
}
.dropmenu li div ul{
    border: none;
    background: none;
    position: relative !important;
}
.dropmenu li div a{
    border: none;
    border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
    display: block;
    position: relative;
    background: none;
    border: none;
}
.dropmenu li div div a{
    display: inline;
    border: none;
    color: #666;
    text-decoration: underline;
    padding: 0px;
    margin: 0px;
    text-transform: none;
}
.dropmenu li div div a:hover{
    color: #000;
    text-decoration: none;
}
ul.left{
    float: left;


    width: 145px;
}
ul.right{
    float: right;
    width: 145px;
}
.small{
    color: #666;
    font-size: 10px;
    padding: 10px 5px 8px 5px !important;
    display: block;
    clear: both;
    font-family: Traditional Arabic, Arial;

    font-weight: bold;
    font-size: 13px;
}
.products{
    width: 300px;
    padding: 15px !important;
}
.products ul{
    width: 100%;
}
.products ul li{
    border-bottom: 1px solid #ccc;
    height: 40px;
    padding: 10px 0px;
}
.products h2{
    font-size: 16px;
    padding: 2px 0px 3px 0px;
    margin: 0px;
}
.products p{
font-family: Traditional Arabic, Arial;

    font-weight: bold;
   
    color: #666;
    font-size: 13px;
    padding: 0px;
    margin: 0px;
}
.products img{
    float: right;
    padding-right: 10px;
}
.products  ul li a{
    display: inline;
    border: none;
    color: #666;
    text-decoration: underline;
    padding: 0px;
    margin: 0px;
    text-transform: none;
}
.products  ul li  a:hover{
    color: #000 !important;
    text-decoration: none;
    background: none !important;
}

.tutorials{
    width: 300px;
}

.login{
    padding: 15px !important;
    width: 180px;
    font-family: Traditional Arabic, Arial;
text-align: right;
    font-weight: bold;
    font-size: 14px;
}
input{
    border:1px solid #4A779D;
    padding: 3px 8px;
    margin-bottom: 8px;
    width: 164px;
}
label{
    padding: 0px 0px 4px 0px;
    display:block;
}
button{
    background: #4A779D url(images/navigation.png) repeat-x scroll 0 0;
    color: #FFF;
    border:1px solid #4A779D;
    padding: 4px 10px;
    width: 180px;

وهذا ملف ال html

الكود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>القوائم الافقية بشكل جميل</title>
<meta name="description" content="Computer tips, tricks en tutorials voor de gevorderde computer gebruikers." />
<meta name="keywords" content="computerfaq, leren, handleidingen, programmeren, php, webdevlopment, scripting, handleidingen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dropmenu.js"></script>
<script>
$(document).ready(function(){
    $("#nav-one").dropmenu();
});
</script>
<link rel="stylesheet" id="smthemenewprint-css"  href="style.css" type="text/css" />
</head>

<body>
<ul id="nav-one" class="dropmenu">
            <li>
                <a href="#">الرئيسية</a>
            </li>
            <li>
                <a href="#">المنتديات</a>
                <ul>
                    <li><a href="#">الدعم الفني</a></li>
                    <li><a href="#">المساعدة</a></li>
                    <li><a href="#">صفحة تجريبية</a></li>
                    <li><a href="#">صفحة تجريبية</a></li>
                </ul>
            </li>
            <li>
                <a href="#item3">التحميل</a>
                <ul>
                    <li><a href="#">برامج كمبيوتر</a></li>
                    <li><a href="#">كتب و راجع</a></li>
                    <li><a href="#">مشاريع جاهزة</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">المنتجــات</a>
                <div class="products">
                    <ul>
                        <li><img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                    </ul>
                    <div class="small">وصف يكتب هنا وصف يكتب هنا وصف يكتب هنا.</div>
                </div>
            </li>
            <li>
                <a href="#">أدوات الهاكر الأخلاقي</a>
                <div class="tutorials">
                    <ul class="left">
                        <li><a href="#">الميتاسبلووت</a></li>
                        <li><a href="#">برنامج Nikto</a></li>
                        <li><a href="#">برامج فحص السرفرات</a></li>
                    </ul>
                    <ul class="right">
                        <li><a href="#">برامج الهندسة العكسية</a></li>
                        <li><a href="#">الهندسة العكسية</a></li>
                        <li><a href="#">برامج الحقن</a></li>
                    </ul>
                    <div class="small">مشاهدة <a href="#">جميع الأقسام</a> او <a href="#">اختر ما يناسبك من القائمة</a>.</div>
                </div>
            </li>
            <li>
                <a href="#">روابط</a>
                <ul>
                    <li><a href="#">برمجة و تصميم</a></li>
                    <li><a href="#">أمن معلومات</a></li>
                    <li><a href="#">الويب 2.0</a></li>
                    <li><a href="#">الدعم الفني</a></li>
                    <li><a href="#">تجربة تجربة</a></li>
                    <li><a href="#">قواعد البيانات</a></li>
                    <li><a href="#">تجربة تجربة</a></li>
                </ul>
            </li>
            <li>
                <a href="#">تسجيل الدخول</a>
                <div class="login" dir="rtl">
                    <label for="txtuser">اسم المستخدم: </label>
                    <input type="text" name="txtuser" id="txtuser" />
                    <label for="txtuser">كلمة المرور: </label>
                    <input type="password" name="txtpass" id="txtpass" />
                    <button>دخول</button>
                </div>
            </li>           
        </ul>
</html>




القائمه بملفاتها فى المرفقات

منقول لعيونكم

اخوكم السيد المصرى

http://www.traidnt.net/vb/attachments/569775d1303756757-net.zip











الــرد الســـريـع
..




الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)




تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة





Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd. Designed & TranZ By Almuhajir