codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Simplest Menu – Short Code – Slide Div from Left

    27th March 2020

    Jquery - Tricks

    jquery icon

    This example below is a clickable menu

    Becomes this when slid in from the left

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      font-family: 'Lato', sans-serif;
    }
     
    .overlay {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
    }
     
    .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;
      transition: 0.3s;
    }
     
    .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>
    </head>
    <body>
     
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
     
    <h2>Fullscreen Overlay Nav Example</h2>
    <p>Click on the element below to open the fullscreen overlay navigation menu.</p>
    <p>In this example, the navigation menu will slide in, from left to right:</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
     
    <script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }
     
    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
    </script>
        
    </body>
    </html>
     

    Orignal post here

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN