كيف انشاء قائمة في Html , Css [ انشاء Mneu Html ,Css

0 51

 اليك كيف ستظهر القائمة  اذا طبقت الخطوات ادنى 

كيف انشاء قائمة في Html and Css [ انشاء Mneu Html and Css.

اليك كود Html..
                                                                                                                                                                          <!DOCTYPE HTML>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>    
    
</head>

<body>
    
   <div class=”mani”>
    
    <nav class=”nav”>
       <ol>
        <li><a href=”#”>Homr</a></li>
        <li><a href=”#”>Services</a></li>
        <li><a href=”#”>About</a></li>
        <li><a href=”#”>Contact</a></li>
           <li class=”animation”></li>
        </ol>
       </nav>
    </div> 
</body>

</html>

بعد الانتهاء من اضافة هذا الكو الئ صفحتك قم بانشاء ملف CSS وتاكد من ربطه مع صفحة Html وقم باضافة الاكواد ادنى

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mani{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
.nav{
    width: 600px;
    height: 60px;
    background-color: rgb(39,39,39);
    border-radius: 8px;
    overflow: hidden;
}
.nav ol{
    display: flex;
    list-style: none;
    position: relative;
}
.nav a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 60px;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
}
.animation{
    width: 0px;
    height: 5px;
    position: absolute;
    top: 0;
    background-color: #00ff00;
    transition: all 0.45;
    
}
li:nth-child(1):hover ~.animation{
    width: 150px;
}
li:nth-child(2):hover ~.animation{
    width: 150px;
    left: 150px;
}
li:nth-child(3):hover ~.animation{
    width: 150px;
    left: 300px
}
li:nth-child(4):hover ~.animation{
    width: 150px;
    left: 450px;
}

اذا واجهتك مشاكل يمكنك الكتابة في التعليقات
اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

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