القائمة الرئيسية

الصفحات

Create menu css



sumer 

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط القائمة الرئيسية باستخدام HTML CSS و من دون JavaScript. لقد قمت سابقًا بمشاركة العديد من المدونات حول وضع سكرول ولكن الجديد في ذلك هو الانزلاق مع التاثير المتأرجح استخدام الخاصية الجميلة في css3 التي لها فائدة كبيرة transfrom وايضا transition والانشاء الانميشن بالرسوم سنتعرف عليه الان في هذه التدوينة

القائمة الرئيسية دائما تأتي في   واجهة مستخدم داخل صفحة ويب تحتوي على مقالات كثيرة في موقع الويب. عادةً ما يتم عرض هذه القائمة الرئيسية ليسهل بذلك التنقيل بين الصفحات  
اليوم في هذه المدونة ، سأشارك معك هذا البرنامج (Create menu css). تقسيمة المميزات هذا لا يستجيب بشكل كامل لأي جهاز. على الأجهزة المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. لانني لم استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة 
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Create menu css).

فيديو تعليمي لانشاء القائمة الرئيسية




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

إذا كنت تحب هذا البرنامج (beatiful menu desgin) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (menu css ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <container>. كما تعلم ، يتم استخدام علامة <container> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من دون bootstrap ثم أنشأت <ul > باسم الفئة ".menu". بعد ذلك ، أنشأت <li> وبعد ذلك انشات "a"  ويكون لكل اب عدة ابناء بداخله وذلك تمهيد لتمرير مؤشر الماوس ليظهر الابناء مع التمرير الجميل 
..
داخل سمة href للعلامة <a> ، لقد كتبت # وهذا يعني أنه عند النقر فوق عناصر التنقل ، فلن يعيد توجيهك إلى أي صفحة. إذا كنت ترغب في إعادة توجيه المستخدم الخاص بك إلى صفحة معينة ، فيمكنك وضع عنوان URL للصفحة داخل href.
لتعلم وضع التصنيفات بشكل سهل تعلم ايضا الادوات الاخرى الديناميكية مثلا لغة البرمجة php

في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العناصر بتقسيمين افقيا. ثم قمت بالتصميم الأساسي للتقسيم وعناصر التنقل مثل أعطيت اللون وحجم الخط والحشو وما إلى ذلك. وبالمثل ، بعد ذلك ، قمت بتصميم مربع   التقسيم. ثم قمت بعد ذلك بالتوجه الى بقية العلامات لاجل التنسيق الصحيح

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

لإنشاء هذا البرنامج (شريط التنقل ). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.



HTML FILE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create css menu web desgin</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<ul id="menu">
<li>
<a href="">Home</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Project</a></li>
<li><a href="">faq</a></li>
</ul>
</li>
<li>
<a href="">Portfolio</a>
<ul>
<li><a href="">Recent works</a></li>
<li><a href="">Our Desgin</a></li>
<li><a href="">Creative</a></li>
<li><a href="">web desgin</a></li>
<li><a href="">Development</a></li>
<li><a href="">New updates</a></li>
</ul>
</li>
<li>
<a href="">Clients</a>
<ul>
<li><a href="">Satisfication</a></li>
<li><a href="">Desgin</a></li>
<li><a href="">Mockup</a></li>
</ul>
</li>
<li>
<a href="">Contact Me</a>
<ul>
<li><a href="">NEW</a></li>
<li><a href="">New</a></li>
<li><a href="">New</a></li>
</ul>
</li>
<li><a href="">Suport</a></li>
<li>
<a href="">Our team</a>
<ul>
<li><a href="">Suports</a></li>
<li><a href="">Sloution</a></li>
<li><a href="">New here?</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>





CSS FILE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 30px;
font-family: sans-serif;
background: url(1.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
#container{
position: relative;
width: 940px;
}
#container:after{
content:"";
display: block;
clear: both;
height: 0;
}
#menu{
position: relative;
float: left;
width: 100%;
border-radius: 50px;
background: #1b3d53;
padding: 10px 30px;
}
#menu, #menu ul{
list-style: none;
}
#menu > li{
float: left;
position: relative;
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
perspective: 1000px;
}
#menu > li:first-child{
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1), 1px 0 0 rgba(255, 255, 255, 0.25);;
}
#menu a{
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: white;
line-height: 1;
font-weight: 400;
font-size: 16px;
background: transparent;
transition: all 0.25s ease-in-out;
text-transform: uppercase;
letter-spacing: 2px;
}
#menu > li:hover > a{
background: #1b3d53;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li ul{
position: absolute;
left: 0;
z-index: 1;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul{
padding: 15px 0;
background: #1b3d53;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0, 0 , 0, 0.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
@keyframes swingdown{
0%{
opacity: 0.99999;
transform: rotateX(90deg);
}
30%{
transform:rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65%{
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
}
#menu li li a{
padding-left: 15px;
font-weight: 300;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all 0.15s linear;
}
#menu li li a:hover{
color: rgba(0, 223, 252, 1);
border-top: dotted 1px rgba(255, 255, 255, 0.15);
border-bottom: dotted 1px rgba(255, 255, 255, 0.15);
background:rgba(0, 223, 252, 0.0.2);
}
هل اعجبك الموضوع :

تعليقات