Как создать полноэкранную оверлейную панель навигации с помощью HTML, CSS и JavaScript?

Опубликовано: 5 Января, 2022

Создание полноэкранной панели навигации: в этой статье вы узнаете, как создать полноэкранную панель навигации для своего веб-сайта. Существует три метода создания полноэкранной оверлейной навигационной панели, которые перечислены ниже:

Слева
Сверху
Без анимации - просто покажи

Вам потребуется создать два div. Один для контейнера оверлея, а другой - для контейнера оверлейного содержимого.

Шаг 1. Первый шаг - создать HTML-файл.

 < div id = "myNav" class = "overlay" >
 
    <!-- Button to close the overlay navigation -->
    < a href = "javascript:void(0)" class = "closebtn"
        onclick = "closeNav()" >×
    </ a >
 
    <!-- Overlay content -->
    < div class = "overlay-content" >
        < a href = "#" >About</ a >
        < a href = "#" >Services</ a >
        < a href = "#" >Clients</ a >
        < a href = "#" >Contact</ a >
    </ div >
 </ div >
 
<!-- Use any element to open/show the
    overlay navigation menu -->
 < span onclick = "openNav()" >open</ span ></ div > 

Шаг 2: Добавьте CSS в файл.

 <style>
    overlay {
        height : 100% ;
        width : 0 ;
        position : fixed ;
        ] z-index : 1 ;
        left : 0 ;
        top : 0 ;
        background-color : rgb ( 0 , 0 , 0 );
        background-color : rgba( 0 , 0 , 0 , 0.9 );
        overflow-x: hidden ;
        transition: 0.5 s;
    }
 
    ].overlay-content {
        position : relative ;
        top : 25% ;
        width : 100% ;
        text-align : center ;
        margin-top : 30px ;
    }
 
    .overlay a {
        padding : 8px ;
        text-decoration : none ;
        font-size : 36px ;
        color : #818181 ;
     
        /* Display block instead
            of inline */
        display : block ;
         
        /* Transition effects
            on hover (color) */
        transition: 0.3 s;
    }
 
    .overlay a:hover,
    .overlay a:focus {
        color : #f1f1f1 ;
    }
 
    .overlay .closebtn {
        position : absolute ;
        top : 20px ;
        right : 45px ;
        font-size : 60px ;
    }
 
    @media screen and ( max-height : 450px ) {
        .overlay a {
            font-size : 20px
        }
 
        .overlay .closebtn {
            font-size : 40px ;
            top : 15px ;
            right : 35px ;
        }
    }
 </style>

Шаг 3: На последнем шаге добавьте к файлам JavaScript.

<script>
    function openNav() {
        document.getElementById("myNav").style.width = "100%";
    }
  
    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
    }
  
    //or
  
    function openNav() {
        document.getElementById("myNav").style.display = "block";
    }
  
    function closeNav() {
        document.getElementById("myNav").style.display = "none";
    }
</script>

Пример 1. В этом примере создается полноэкранная панель навигации слева.

 <!DOCTYPE html>
 < html >
 
< head >
    < meta name = "viewport" content=" width = device -width,
               initial-scale = 1 ">
    < style >
        .overlay {
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #1a6e1a;
            overflow-x: hidden;
            transition: 1.0s;
        }
 
        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
        }
 
        .overlay a {
            padding: 10px;
            text-decoration: none;
            font-size: 40px;
            color: white;
            display: block;
            transition: 0.3s;
        }
 
        .overlay a:hover,
        .overlay a:focus {
            color: black;
        }
 
        .overlay .closebtn {
            position: absolute;
            top: 10px;
            right: 35px;
            font-size: 70px;
        }
    </ style >
 </ head >
 
< body >
 
    < div id = "myNav" class = "overlay" >
        < a href = "javascript:void(0)"
            class = "closebtn" onclick = "closeNav()" >
            ×
        </ a >
        < div class = "overlay-content" >
            < a href = "#" >About</ a >
            < a href = "#" >Practice</ a >
            < a href = "#" >Courses</ a >
            < a href = "#" >Contact</ a >
        </ div >
    </ div >
 
    < span style = "font-size:35px;cursor:pointer"
        onclick = "openNav()" >
        ≡
    </ span >
 
    < h2 >GeeksForGeeks</ h2 >
 
    < p >
        Click on the nav bar icon
        to see full screen overlay:
    </ p >
 
    < script >
        function openNav() {
            document.getElementById(
                "myNav").style.width = "100%";
        }
 
        function closeNav() {
            document.getElementById(
                "myNav").style.width = "0%";
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Пример 2: В этом примере создается полноэкранная оверлейная панель навигации сверху.

 <!DOCTYPE html>
 < html >
 
< head >
    < meta name = "viewport" content=" width = device -width,
               initial-scale = 1 ">
    < style >
        .overlay {
            height: 0%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #1a6e1a;
            overflow-y: hidden;
            transition: 1.0s;
        }
 
        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
        }
 
        .overlay a {
            padding: 10px;
            text-decoration: none;
            font-size: 40px;
            color: white;
            display: block;
            transition: 0.3s;
        }
 
        .overlay a:hover,
        .overlay a:focus {
            color: black;
        }
 
        .overlay .closebtn {
            position: absolute;
            top: 10px;
            right: 35px;
            font-size: 70px;
        }
    </ style >
 </ head >
 
< body >
 
    < div id = "myNav" class = "overlay" >
        < a href = "javascript:void(0)"
            class = "closebtn" onclick = "closeNav()" >
            ×
        </ a >
        < div class = "overlay-content" >
            < a href = "#" >About</ a >
            < a href = "#" >Practice</ a >
            < a href = "#" >Courses</ a >
            < a href = "#" >Contact</ a >
        </ div >
    </ div >
     
    < span style = "font-size:35px;cursor:pointer"
            onclick = "openNav()" >
        ≡
    </ span >
 
    < h2 >GeeksForGeeks</ h2 >
 
    < p >
        Click on the nav bar icon
        to see full screen overlay:
    </ p >
 
    < script >
        function openNav() {
            document.getElementById(
                "myNav").style.height = "100%";
        }
 
        function closeNav() {
            document.getElementById(
                "myNav").style.height = "0%";
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Пример 3: В этом примере создается полноэкранная оверлейная панель навигации без анимации.

 <!DOCTYPE html>
 < html >
 
< head >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1" >
 
    < style >
        .overlay {
            height: 100%;
            width: 100%;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #1a6e1a;
        }
 
        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
        }
 
        .overlay a {
            padding: 10px;
            text-decoration: none;
            font-size: 40px;
            color: white;
            display: block;
            transition: 0.3s;
        }
 
        .overlay a:hover,
        .overlay a:focus {
            color: black;
        }
 
        .overlay .closebtn {
            position: absolute;
            top: 10px;
            right: 35px;
            font-size: 70px;
        }
    </ style >
 </ head >
 
< body >
 
    < div id = "myNav" class = "overlay" >
        < a href = "javascript:void(0)"
            class = "closebtn" onclick = "closeNav()" >
            ×
        </ a >
 
        < div class = "overlay-content" >
            < a href = "#" >About</ a >
            < a href = "#" >Practice</ a >
            < a href = "#" >Courses</ a >
            < a href = "#" >Contact</ a >
        </ div >
    </ div >
 
    < span style = "font-size:35px;cursor:pointer"
            onclick = "openNav()" >
        ≡
    </ span >
 
    < h2 >GeeksForGeeks</ h2 >
     
    < p >
        Click on the nav bar icon to
        see full screen overlay:
    </ p >
 
    < script >
        function openNav() {
            document.getElementById(
                "myNav").style.display = "block";
        }
 
        function closeNav() {
            document.getElementById(
                "myNav").style.display = "none";
        }
    </ script >
 </ body >
 
</ html > 

Выход:

JavaScript Вопросы о Web технологиях HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Как создать полноэкранную оверлейную панель навигации с помощью HTML, CSS и JavaScript?

РЕКОМЕНДУЕМЫЕ СТАТЬИ