قائمة التنقل المنسدلة في CSS ،حيث يتم توسيع القائمة عند تحريك الماوس فوق عنصر واحد. هذا نمط جديد للتنقل
مثال على قائمة التنقل المنسدلة في CSS ،حيث يتم توسيع القائمة عند تحريك الماوس فوق عنصر واحد. هذا نمط جديد للتنقل ، يمكن تثبيته في أي مكان على الموقع ، نظرًا لعدم وجود مساحة كافية دائمًا ، كل ما تحتاجه هنا هو زر واحد صغير. التي تبدو مشرقة حسب التصميم ، حيث تحتوي على عدد قليل من البيكسلات ، حيث يتم إضافة الظلال ، مما يؤكد بوضوح الزر.
التركيب:
أولاً ، نحتاج إلى تضمين رموز الخطوط في HEAD على الصفحة.<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
HTML
<nav>
<div class="kompaktnaya-menyu">
<a class="navigation" href="#"><i class="fas fa-home"></i></a>
<a class="navigation" href="#"><i class="far fa-folder-open"></i></a>
<a class="navigation" href="#"><i class="fas fa-laptop-code"></i></a>
<a class="navigation" href="#"><i class="fas fa-shield-alt"></i></a>
<a class="navigation" href="#"><i class="fas fa-keyboard"></i></a>
<a class="navigation" href="#"><i class="fas fa-user-secret"></i></a>
</div>
</nav>
css
.kompaktnaya-menyu {
background: #11429c;
border: 2px solid #f7eeee;
width: 50px;
max-height: 50px;
border-radius: 50px;
transition: all 1s;
box-shadow: inset 0 0 30px #2f2e2e;
cursor: pointer;
overflow: hidden;
transition: max-height 1.5s;
transition-timing-function: linear;
box-shadow: 0px 0px 6px 1px rgba(35, 35, 35, 0.54), 0px 0px 10px 10px rgba(31, 31, 31, 0);
}
.kompaktnaya-menyu:hover{
max-height: 512px;
border-radius:100px;
transition:max-height 1.5s;
transition-timing-function: linear;
}
.navigation {
display: block;
text-align: center;
padding: 12px;
color: #fbf4f4;
font-size: 22px;
}
.navigation:hover {
transition: color 0.2s;
color: #c4c6ca;
}
بعد فهم كيفية عمل كل شيء ، يمكن لمسؤول الموقع استخدامه في اتجاهات مختلفة ، وأيضًا عند إنشاء صفحة منفصلة ، لا تحتاج إلى إنشاء قائمة كاملة ، ولكن يمكنك استخدام مثل هذا النموذج الذي سيسهل بالتأكيد وظائف كل من إدارات الموقع والمستخدمين.
ملاحظة - عند الإنشاء ، كان علي أن أضع الفئات بحيث لا توجد تعارضات على المورد. إذا كنت بحاجة إلى الكود الأصلي مع النمط ، فيمكنك تنزيله أو يتم توفيره أيضًا للعروض التوضيحية ، فقط بدون تصميم حسب التصميم.
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS