معالجة مشكل في transition css3

هلا قمت بارفاق شيفرة HTML أيضا؟ 

بتاريخ 2 ساعات قال Adnane Kadri:

هلا قمت بارفاق شيفرة HTML أيضا؟ 

تفضّل

    <!-- section-1 -->

    <div class="section-1">

        <div class="navbar">

            <a href="#" class="navbar-link">Design</a>

            <a href="#" class="navbar-link">Customers</a>

            <a href="#" class="navbar-link">Team</a>

            <a href="#" class="navbar-link">Contact</a>

        </div>

        <div class="floating-bg"></div>

        <div class="logo">

            <!-- i.fa-bezier-curve -->

        </div>

    </div>

بتاريخ 9 دقائق مضت قال محمود سعداوي:

تفضّل

    <!-- section-1 -->

    <div class="section-1">

        <div class="navbar">

            <a href="#" class="navbar-link">Design</a>

            <a href="#" class="navbar-link">Customers</a>

            <a href="#" class="navbar-link">Team</a>

            <a href="#" class="navbar-link">Contact</a>

        </div>

        <div class="floating-bg"></div>

        <div class="logo">

            <!-- i.fa-bezier-curve -->

        </div>

    </div>

 

بما أنك تقوم بإعطاء عرض 1% لحاوي كل كلمة، لما لا تقوم فقط بإعطاءه عرضا كاملا عند تمرير مؤشر الفأرة عليه؟ وبالتالي فإنه لن يتم النزول سطرا لتظهر بشكلها الافتراضي. مثال: 

.navbar a:hover{
  width: auto;
}

مثال عملي.

بتاريخ 4 ساعات قال Adnane Kadri:

بما أنك تقوم بإعطاء عرض 1% لحاوي كل كلمة، لما لا تقوم فقط بإعطاءه عرضا كاملا عند تمرير مؤشر الفأرة عليه؟ وبالتالي فإنه لن يتم النزول سطرا لتظهر بشكلها الافتراضي. مثال: 

.navbar a:hover{
  width: auto;
}

مثال عملي.

للأسف صديقي.

الملف كاملا:

Creative Design.zip

بتاريخ 16 ساعات قال محمود سعداوي:

للأسف صديقي.

الملف كاملا:

Creative Design.zip

لتفادي المشكلة قد قمت بتزويد ارتفاع كل من العناصر: 

.navbar a{
    color: #fff;
    margin: 20px 50px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    word-wrap: break-word;
    width: 20px;
    letter-spacing: 3px;
    padding: 5px;
    transition-duration: 0.5s;

    /*++++++++++++++++*/ 
    height: 250px;
}

قمت ايضا بازالة تأثيري الهوفر background-colo و height، يمكنك استبدالهما بأي تأثير آخر لأنهما لن يخدما الفكرة التي لديك: 

.navbar a:hover{
    width: 120px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: normal;
    transition-duration: 2.5s;
}