منتديات الغروب
مرحبا بكم في منتديات الغروب المرجو منك التسجيل بالمنتدى

انضم إلى المنتدى ، فالأمر سريع وسهل

منتديات الغروب
مرحبا بكم في منتديات الغروب المرجو منك التسجيل بالمنتدى
منتديات الغروب
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

اذهب الى الأسفل
Saad
Saad
مدير عام ومنشئ المنتدى
مدير عام ومنشئ المنتدى
الجنس : ذكر
عدد الرسائل : 1642
تاريخ التسجيل : 02/10/2008

بطاقة الشخصية
المهنة:
https://sundown.ahlamontada.net

كود  واجهة  للمنتديات احترافية  HTML Empty كود واجهة للمنتديات احترافية HTML

الثلاثاء فبراير 11, 2020 2:51 am
كود واجهة منتدى مع ازرار تصفح جميلة 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



الكود:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  <title>منتديات الغروب</title>
<div class="head">
      
   <h1>
        منتديات الغروب
   </h1>
      
</div>
 
<div class="nav">
      
   <ul class="main-menu">
         
      <li>
           Home 
      </li>
         
      <li>
           Course     
         <ul class="sub-menu">
                               
            <li>
                 HTML 
            </li>
                               
            <li>
                 CSS 
            </li>
                               
            <li>
                 JAVASCRIPT 
            </li>
                               
            <li>
                 JQUERY 
            </li>
                               
            <li>
                 BOOTSTRAP 
            </li>
                             
         </ul>
                        
      </li>
         
      <li>
           Videos               
         <ul class="sub-menu">
                               
            <li>
                 C 
            </li>
                               
            <li>
                 C++ 
            </li>
                               
            <li>
                 JAVA 
            </li>
                               
            <li>
                 PYTHON 
            </li>
                               
            <li>
                 RUBY 
            </li>
                             
         </ul>
            
      </li>
         
      <li>
           About us 
      </li>
         
      <li>
           Contact 
      </li>
         
   </ul>
      
</div>
 <style type="text/css">
    body{
       background:#ccc;
    }
       *{
          padding: 0px;
          margin: 0px;

       }
     
    .head{
       background: white;
       color: RGB(225,66,0);
       padding: 10px 70px;
       font-family: sans-serif;
       font-size: 30px;
       border-top:10px solid #37f;   
    }


       .nav{
          padding: 10px 0px;
          background: #37f;
          text-align: center;
       }

        .main-menu>li{
           display: inline-block;
           width: 150px;
           padding: 10px 0px;
           margin-left: 10px;
           text-align: center;
           color: white;
           font-size: 20px;
           border-left: 1px solid white;
           transition: .4s;
           cursor: pointer;
           box-sizing: border-box;

        }
       
        .main-menu li:hover .sub-menu{
              display: block;
        }
 
        .sub-menu{
           display: none;
           position: absolute;
           padding: 0px;
           margin-top: 30px;
           margin-left: -10px;   
           float: left;
           width: 300px;
           text-align: left;
           box-sizing: border-box;
           border: 5px solid white;
           box-shadow: 1px 1px 1px grey;
           
     
        }

        .sub-menu:before{
                content:"";
                width: 0px;
                height:0px;
                border-left:20px solid transparent;
                border-right:20px solid transparent;
                border-bottom:30px solid white;
                position: absolute;
                margin:-30px 0px 0px 60px;
        }

        .sub-menu li{
           list-style-type: none;
           padding: 10px;
           color: white;
           font-size: 20px;
           background: #37f;
        }
    .main-menu>li:hover, .sub-menu>li:hover{
           background: #35c;
        }
 
   </style>


avatar
kariaka3977
عضو مشارك
عضو مشارك
الجنس : ذكر
عدد الرسائل : 28
تاريخ التسجيل : 31/08/2009

كود  واجهة  للمنتديات احترافية  HTML Empty _da3m_22

الجمعة فبراير 28, 2020 9:38 pm
موضوع رائع بوركت
كود  واجهة  للمنتديات احترافية  HTML 4
كود  واجهة  للمنتديات احترافية  HTML 128711691410
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى