انشاء قائمة متنقلة في Html .css[ انشاء navigatoin menu Html ,Css

0 186

 انشاء قائمة متنقلة في Html .css .

  1. قم بانشاء ملف HTMl
  2. قم بانشاء ملف CSS  واربطه في صفحة Html 
  3. قم بانشاء ملف بصيغة JS (ملف جافا سكريبت) ورابطه في صفحة  Html

 ملاحظة : 

يمكنك عدم انشاء ملف بصيغة JS ….لان يمكنك كتابة كود جافا سكريبت داخل صفحة Html
باستخدام الوسم  <script>……

سيكون شكل القائمة كما موجود في الفيديو ويمكنك التعديل عليه…….

كود Html

<!DOCTYPE HTML>
<html>
<head>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”overlay” id=”navbar”>
    <div class=”menu”>
    <a href=”#”>Home</a>
    <a href=”#”>About</a>
    <a href=”#”>Project</a>
    <a href=”#”>Contact</a>
    </div>
    <button class=”clbtn” onclick=”hide()”>&times;</button>
    </div>    
    <span onclick=”show()” class=”opbtn”>&#9776;</span>
    
    
   
</body>
</html>

كود CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #f8dc81;
}
.overlay{
    position: fixed;
    height: 100%;
    width: 0;
    z-index: 1;
    left: 0;
    top: 0;
    background-color:black;
    overflow: hidden;
    transition: 0.6s;
    
}
.menu{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
}
.menu a{
    text-decoration: none;
    display:block;
    font-size: 3rem;
    padding: 10px;
    color: #b1b1b1;
    transition: all .4s
}
.menu a:hover{
    color: #ffffff;
}
.overlay .clbtn{
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 100px;
    outline: none;
    cursor: pointer;
    color: white;
}
.opbtn{
    font-size: 5rem;
    font-weight: 700;
    color: white;
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}

كود Javascript..

function show(){
    document.getElementById(“navbar”).style.width=”100%”;
}
function hide(){
    document.getElementById(“navbar”).style.width=”0%”;
}

ويمكنك ايضا تحميل الملفات جاهزة عبر ميديا فاير  والتعديل عليها  ?

تحميل الان

اترك رد

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

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