chatالمواضيع الأخيرة
حصرى : كود اضافات للعضو توضع اسفل الموضوعaccess_timeالإثنين 19 يوليو 2021 - 17:05persondzweb
استايل جوال خفيف لاحلى منتديaccess_timeالأحد 11 يوليو 2021 - 22:36personم/أميــــر2006
فوائد الذرة الصفراءaccess_timeالأحد 11 يوليو 2021 - 12:14personDr/Aber
موضوع كامل عن النميمةaccess_timeالأحد 11 يوليو 2021 - 12:09personداليا
مواضيع مماثلة
أشخاص في صن سيت
مشاهدة المزيد

نُشر بواسطة:

نغم الحياة
النجمة الذهبيه 20%
النجمة الذهبيه 20%
تاريخ النشر:
الأحد 30 ديسمبر 2018 - 0:51
اسم الدولة : :
مصر
العمر :
25
عدد المساهمات :
314
المعجبون بمواضيعى :
13

كلمات دليلية:

كود صفحة دخول العضو بشكل منبثق وجميل

كود صفحة دخول العضو بشكل منبثق وجميل



بسم الله الرحمن الرحيم
موضوع اليوم يختلف عن كل المواضيع لانه حصري وفريد من نوعه
كود صفحة دخول العضو بشكل منبثق وجميل
مكودة بتقنيات Html# و Css# و JavaScript#
تظهر زر بالجانب الايمن لتسجيل الدخول وفى حالة النقر عليه تنبثق صفحة لتسجيل الدخول بشكل متطور جدا
صورة للكود :
كود صفحة دخول العضو بشكل منبثق وجميل VhuhF9z
نأتي لطريقة التركيب :
1 - نتوجه إلى التومبيلات > قالب الهيدر :
وداخل وسم :

الكود:

<head>

نضع التالي :

الكود:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

وفي نفس القالب نبحث عن الوسم ونضع أسفله :

الكود:

  <!-- BEGIN switch_user_logged_out -->
  <div class="assem">
                        <a href="#" id="user-btn">
                            <div class="menu-icon">
                                <i class="fa fa-user-times" aria-hidden="true"></i>
                            </div>
                        </a>
        </div>
        <div id="overlay" class="overlay" style="overflow: hidden; outline: none; width: 0%; right: -20px; display: block;">
        <i id="close-btn" class="fa fa-close"></i>
        <div class="login-page">
            <div class="container">
                <h2>الدخول للموقع</h2>
                <div class="user-login">
                    <form action="/login.forum?redirect=/" method="post" name="form_login">
                        <div class="input-f">
                            <input type="text" name="username" placeholder="اسم المستخدم" required>
                        </div>
                        <div class="input-f">
                            <input type="password" name="password" placeholder="كلمة المرور" required>
                        </div>
                        <div class="input-f">
                            <input type="submit" name="login" value="الدخول">
                        </div>
                    </form>
                </div>
                <div class="register">
                    <button type="button" class="frgt" onclick="location.href='/profile?mode=sendpassword'">نسيت كلمة المرور</button>
                    <a href="/register">أو يمكنك تسجيل حساب جديد من هنا</a>
                </div>
            </div>
        </div>
        </div> 
              <!-- END switch_user_logged_out -->

الآن نتجه إلى ورقة css ونضع الأكواد التالية ( يمكنكم وضعها أيضا في قالب الهيدر ) :

ضع رد حتى ترى الكود :




و آخر خطوة نذهب إلى العناصر الإضافية ثم إدارة أكواد JavaScript ونضع الكود التالي :

الكود:

$(function(){
  $("#user-btn").click(function(){
      $("#overlay").animate({width:'100%',right:'0px'});
      $(".overlay").css('display', 'block');
    $('body').addClass('stop-scrolling');
  });
    $("#close-btn").click(function(){
      $(".overlay").animate({width:'0%',right:'-20px'});
      $('body').removeClass('stop-scrolling');
  });
});

كما في الصورة :
كود صفحة دخول العضو بشكل منبثق وجميل S10
وفى النهاية السلام عليكم ورحمة الله
كود صفحة دخول العضو بشكل منبثق وجميل VhuhF9z


عدل سابقا من قبل نغم الحياة في الأحد 30 ديسمبر 2018 - 1:02 عدل 2 مرات