Side menu does not work or does not take script

Question

Side menu does not work or does not take script

Navigation

#1 by (0 votes)

0

I would like to understand why by doing the menu that I copy below, if I load the styles on the same page it works, and if I load them with a separate CSS, I do not. I will appreciate if you can explain me xq and how to solve it with the css apart.

body {
    font-family: "Lato", sans-serif;
}

.menuprin {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #6D0D14;
    overflow-x: hidden;
    transition: 0.2s;
}

.menuprin a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #A7988B;
    display: block;
    transition: 0.1s;
}

.menuprin a:hover {
    color: #FFFFFF;
}

.menuprin .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    position: fixed;
    display:block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;    
    transition: margin-left .5s;
    padding: 16px;
}

#contiene {
    position: relative;
    top:0px;
    left:0px;
    background-color: #000000;
    width: 100%;
    height: 60px;
}

a {
  font-size: 38px;  
}

#frprincipal {
    position: fixed;
    display:block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0px;
}

img#menu1 {
    position: relative;
    width: 50px;
    height:50px;
    top: -2px;
    left: 5px;
}


@media screen and (max-height: 450px) {
  .menuprin {padding-top: 15px;}
  .menuprin a {font-size: 18px;}
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<Link href="css/menu.css?<?php echo date('Y-m-d H:i:s'); ?>" rel="stylesheet" type="text/css" />

<script>
  function openNav() {
      document.getElementById("MenuPrincipal").style.width = "250px";
  }

  function closeNav() {
      document.getElementById("MenuPrincipal").style.width = "0";
  }
</script>

</head>
<body>

<div id="MenuPrincipal" class="menuprin">
  <div id="contiene"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></div>
  <br>

  <a href="#" onclick="closeNav();document.getElementById('frprincipal').src='datos1.php';" onclick="closeNav();document.getElementById('frprincipal').src='datos1.php';">Datos1</a>
  <a href="#" onclick="closeNav();document.getElementById('frprincipal').src='datos2.php';" onclick="closeNav();document.getElementById('frprincipal').src='datos2.php';">Datos2</a>
  <a href="#" onclick="closeNav();document.getElementById('frprincipal').src='datos3.php';" onclick="closeNav();document.getElementById('frprincipal').src='datos3.php';">Datos3</a>
  <a href="#" onclick="closeNav();document.getElementById('frprincipal').src='datos4.php';" onclick="closeNav();document.getElementById('frprincipal').src='datos4.php';">Datos4</a>
  

<div id="main">
  <iframe id="frprincipal" src="datos1.php">  
  </iframe>
</div>

<img id="menu1" src="img/menu.png" onclick="openNav()">
     
</body>
</html>

The idea is that it is a drop-down menu. Thanks!

javascript html5

asked by look68 22.08.2018 в 17:39

source

1 answer

Autocomplete shows only one result Modify content from a DataGridView and validate update

score 0 · Answer 1

to do it you should use Jquery, which is much simpler, enjoying the function toggle() that the only thing it does is change the visibility of the desired element, you can pass as parameter the more you want the transition lasts, It also allows you to pass "slow" "fast", which are speeds predetermined by them. you also had a couple of <div> that were not closed, here I pass the code, I hope it serves you!

body {
    font-family: "Lato", sans-serif;
}
.menuprin {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #6D0D14;
    overflow-x: hidden;
    transition: 0.2s;
    display: none;
}

.menuprin > a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #A7988B;
    display: block;
    transition: 0.1s;
}

.menuprin > a:hover {
    color: #FFFFFF;
}

.menuprin .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    position: fixed;
    display:block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;    
    transition: margin-left .5s;
    padding: 16px;
}

#contiene {
    position: relative;
    top:0px;
    left:0px;
    background-color: #000000;
    width: 100%;
    height: 60px;
}

a {
  font-size: 38px;  
}

#frprincipal {
    position: fixed;
    display:block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0px;
}

img#menu1 {
    position: fixed;
    z-index: 2;
    width: 50px;
    height:50px;
    top: -2px;
    left: 5px;
    cursor: pointer;
}


@media screen and (max-height: 450px) {
  .menuprin {padding-top: 15px;}
  .menuprin a {font-size: 18px;}
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale1">
        <meta charset="utf-8">
        <link href="style.css?<?php =microtime() ?>" rel="stylesheet" type="text/css">
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    </head>
    <body>
        <script>
           $(document).ready ( function () {
                $(document).on("click", "#menu1", function() {
                    $("#MenuPrincipal").toggle();
                });
          
                $(document).on("click", "#MenuPrincipal a" , function() {
                    $("#MenuPrincipal").toggle();
                });
           });
        </script>
        <img id="menu1" src="img/menu.png" >
        <div id="MenuPrincipal" class="menuprin">
           
                <a href="#">prueba</a>
                <a href="#">prueba</a>
                <a href="#">prueba</a>
                <a href="#">prueba</a>
            
        </div>
        <div id="main">
            <iframe id="frprincipal" src="datos1.php"></iframe>
        </div>
    </body>
</html>
<html>