Dev Faq
2
votes

Comment créer un lien entre ces éléments de menu et d'autres pages?

J'essaie de faire en sorte que cliquer n'importe où sur la case colorée pour "home" vous mènera à yayitworks.html, mais quand j'aurai dit

HOME p >

, il ne va pas à yayitworks.html lorsque vous cliquez dessus. Pouvoir cliquer sur le texte réel et aller sur yayitworks.html serait bien, mais il serait préférable de pouvoir cliquer n'importe où sur la boîte (généralement mieux ux) 

<html>
    <head>
    <title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
        <link href="animate.css" rel=stylesheet>
<script src="main.js"></script>
           </head>
    <body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
    <div class="menu-bar menu-bar1"></div>
    <div class="menu-bar menu-bar2"></div>
    <div class="menu-bar menu-bar3"></div>
</div>
 
<div class="menu">
    <div class="menu-con" style="background:red;" href="yayitworks.html">
        <p>HOME</p>
    </div>
    <div class="menu-con" style="background:blue">
        <p>PORTFOLIO</p>
    </div>
    <div class="menu-con" style="background:darkorange;">
        <p>UNDECIDED</p>
    </div>
    <div class="menu-con" style="background:green;">
        <p>HOMEWORK</p>
    </div>
    <div class="menu-con" style="background:white;">
        <p style="color:black">TEST PAGE</p>
    </div>
</div>
    </body>
</html>
* {
    box-sizing: border-box;
    max-width: 100%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: bold;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(background.png);
    background-color: black;
}

.menu-icon {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    right: 0;
    margin: 10px 15px;
    transform: scale(0.8);
    padding: 0;
    cursor: pointer;
    z-index: 20
}

.menu-bar {
    width: 50px;
    height: 5px;
    background: rgb(190, 190, 190);
    position: absolute;
    transition: all 0.3s;
    font-weight:bold;
    font-size:50px
}

.menu-bar1 {
    margin-top: 9px
}

.menu-bar2 {
    margin-top: 23px
}

.menu-bar3 {
    margin-top: 37px
}

.menu-icon.hover .menu-bar1 {
    -webkit-transform: rotate(45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu-icon.hover .menu-bar2 {
    opacity: 0
}

.menu-icon.hover .menu-bar3 {
    -webkit-transform: rotate(-45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.menu-con {
    -webkit-flex-grow: 1;
    flex-basis: 0;
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    position: relative;
    top: -100%;
    transition: all 0.5s
}

.menu-con p:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.menu-con:hover p:before {
    background: rgba(0, 0, 0, 0.2)
}

.menu-con p {
    height: 20px;
    -webkit-align-self: center;
    color: white;
    font-size: 25px;
    z-index: 2;
    cursor: pointer
}

@media screen and (max-width: 600px) {
    .menu-con {
        min-width: 50%
    }
}

@media screen and (max-width: 350px) {
    .menu-con {
        min-width: 100%
    }
}
var open = false;

function Drop(n) {
    var i;
    if (open == false) {
        for (i = n; i < 5; i++) {
            Drp(i)
        }
        open = true
    } else if (open == true) {
        for (i = n; i < 5; i++) {
            Cls(i)
        }
        open = false
    }
}

function Drp(n) {
    var elem = document.getElementsByClassName("menu-con")[n];
    var pos = -1 * window.innerHeight - n * 100;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos >= -10) {
            clearInterval(id);
            elem.style.top = 0 + 'px';
        } else {
            pos += 10;
            elem.style.top = pos + 'px';
        }
    }
}

function Cls(n) {
    var elems = document.getElementsByClassName("menu-con")[n];
    var poss = 0;
    var ids = setInterval(frames, 5);

    function frames() {
        if (poss <= -1 * window.innerHeight) {
            clearInterval(ids);
            elems.style.top = -1 * window.innerHeight + 'px';
        } else {
            poss += -7 - n * 2;
            elems.style.top = poss + 'px';
        }
    }
}

3 commentaires

href ne fonctionne que sur une balise a . Vous avez affiché la balise p dans la description ci-dessus et la balise div dans l'exemple code . Essayez de le changer en une balise et essayez

Vous ne pouvez pas avoir l'attribut href sur autre chose qu'un .

Salut Ben - juste suivi. Votre question a-t-elle reçu une réponse satisfaisante? Si je peux vous aider davantage, veuillez ajouter un commentaire sous ma réponse ou modifier votre question pour clarifier ce que vous voulez savoir. Sinon, ce serait formidable si vous pouviez choisir une «meilleure réponse» (en cliquant sur la coche à côté de la réponse) pour fermer la question. Si aucune réponse n'a fourni d'informations utiles, veuillez ajouter votre propre réponse et la sélectionner comme meilleure réponse. (Vous n'obtiendrez aucun point pour cela, mais cela clôturera la question.) Merci!

3 Réponses :

0
votes

Changez simplement

avec et changez également p en a dans CSS , essayez ceci, j'espère que cela vous aidera. Merci

​​

<html>
    <head>
    <title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
        <link href="animate.css" rel=stylesheet>
<script src="main.js"></script>
           </head>
    <body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
    <div class="menu-bar menu-bar1"></div>
    <div class="menu-bar menu-bar2"></div>
    <div class="menu-bar menu-bar3"></div>
</div>
 
<div class="menu">
    <div class="menu-con" style="background:red;">
        <a href="yayitworks.html">HOME</a>
    </div>
    <div class="menu-con" style="background:blue">
        <a href="">PORTFOLIO</a>
    </div>
    <div class="menu-con" style="background:darkorange;">
        <a href="">UNDECIDED</a>
    </div>
    <div class="menu-con" style="background:green;">
        <a href="">HOMEWORK</a>
    </div>
    <div class="menu-con" style="background:white;">
        <a href="" style="color:black">TEST PAGE</a>
    </div>
</div>
    </body>
</html>
* {
    box-sizing: border-box;
    max-width: 100%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: bold;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(background.png);
    background-color: black;
}

.menu-icon {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    right: 0;
    margin: 10px 15px;
    transform: scale(0.8);
    padding: 0;
    cursor: pointer;
    z-index: 20
}

.menu-bar {
    width: 50px;
    height: 5px;
    background: rgb(190, 190, 190);
    position: absolute;
    transition: all 0.3s;
    font-weight:bold;
    font-size:50px
}

.menu-bar1 {
    margin-top: 9px
}

.menu-bar2 {
    margin-top: 23px
}

.menu-bar3 {
    margin-top: 37px
}

.menu-icon.hover .menu-bar1 {
    -webkit-transform: rotate(45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu-icon.hover .menu-bar2 {
    opacity: 0
}

.menu-icon.hover .menu-bar3 {
    -webkit-transform: rotate(-45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.menu-con {
    -webkit-flex-grow: 1;
    flex-basis: 0;
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    position: relative;
    top: -100%;
    transition: all 0.5s
}

.menu-con a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.menu-con:hover a:before {
    background: rgba(0, 0, 0, 0.2)
}

.menu-con a {
    height: 20px;
    -webkit-align-self: center;
    color: white;
    font-size: 25px;
    z-index: 2;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .menu-con {
        min-width: 50%
    }
}

@media screen and (max-width: 350px) {
    .menu-con {
        min-width: 100%
    }
}
var open = false;

function Drop(n) {
    var i;
    if (open == false) {
        for (i = n; i < 5; i++) {
            Drp(i)
        }
        open = true
    } else if (open == true) {
        for (i = n; i < 5; i++) {
            Cls(i)
        }
        open = false
    }
}

function Drp(n) {
    var elem = document.getElementsByClassName("menu-con")[n];
    var pos = -1 * window.innerHeight - n * 100;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos >= -10) {
            clearInterval(id);
            elem.style.top = 0 + 'px';
        } else {
            pos += 10;
            elem.style.top = pos + 'px';
        }
    }
}

function Cls(n) {
    var elems = document.getElementsByClassName("menu-con")[n];
    var poss = 0;
    var ids = setInterval(frames, 5);

    function frames() {
        if (poss <= -1 * window.innerHeight) {
            clearInterval(ids);
            elems.style.top = -1 * window.innerHeight + 'px';
        } else {
            poss += -7 - n * 2;
            elems.style.top = poss + 'px';
        }
    }
}

0 commentaires
1
votes

Premièrement: votre nom de classe est mal orthographié, il doit s'agir de menu-icon et non de menu-con .

Deuxième:

ACCUEIL

Il doit s'agir de balises , pas de

, comme ceci:

ACCUEIL

Troisièmement: N'oubliez pas d'ajouter display: block; à votre classe .menu-icon dans votre CSS pour qu'il agisse le même qu'il est actuellement.

0 commentaires
0
votes

L'attribut href va sur la balise , pas sur une balise

. J'ai mis à jour votre code pour vous montrer à quoi cela ressemblerait. 

<html>
    <head>
    <title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
        <link href="animate.css" rel=stylesheet>
<script src="main.js"></script>
           </head>
    <body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
    <div class="menu-bar menu-bar1"></div>
    <div class="menu-bar menu-bar2"></div>
    <div class="menu-bar menu-bar3"></div>
</div>
 
<div class="menu">
    <a href="yayitworks.html">
        <div class="menu-con" style="background:red;">
            <p>HOME</p>
        </div>
    </a>
    <div class="menu-con" style="background:blue">
        <p>PORTFOLIO</p>
    </div>
    <div class="menu-con" style="background:darkorange;">
        <p>UNDECIDED</p>
    </div>
    <div class="menu-con" style="background:green;">
        <p>HOMEWORK</p>
    </div>
    <div class="menu-con" style="background:white;">
        <p style="color:black">TEST PAGE</p>
    </div>
</div>
    </body>
</html>
* {
    box-sizing: border-box;
    max-width: 100%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: bold;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(background.png);
    background-color: black;
}

.menu-icon {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    right: 0;
    margin: 10px 15px;
    transform: scale(0.8);
    padding: 0;
    cursor: pointer;
    z-index: 20
}

.menu-bar {
    width: 50px;
    height: 5px;
    background: rgb(190, 190, 190);
    position: absolute;
    transition: all 0.3s;
    font-weight:bold;
    font-size:50px
}

.menu-bar1 {
    margin-top: 9px
}

.menu-bar2 {
    margin-top: 23px
}

.menu-bar3 {
    margin-top: 37px
}

.menu-icon.hover .menu-bar1 {
    -webkit-transform: rotate(45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu-icon.hover .menu-bar2 {
    opacity: 0
}

.menu-icon.hover .menu-bar3 {
    -webkit-transform: rotate(-45deg) scaleX(0.7);
    margin-top: 22px;
}

.menu {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.menu-con {
    -webkit-flex-grow: 1;
    flex-basis: 0;
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    position: relative;
    top: -100%;
    transition: all 0.5s
}

.menu-con p:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.menu-con:hover p:before {
    background: rgba(0, 0, 0, 0.2)
}

.menu-con p {
    height: 20px;
    -webkit-align-self: center;
    color: white;
    font-size: 25px;
    z-index: 2;
    cursor: pointer
}

@media screen and (max-width: 600px) {
    .menu-con {
        min-width: 50%
    }
}

@media screen and (max-width: 350px) {
    .menu-con {
        min-width: 100%
    }
}
var open = false;

function Drop(n) {
    var i;
    if (open == false) {
        for (i = n; i < 5; i++) {
            Drp(i)
        }
        open = true
    } else if (open == true) {
        for (i = n; i < 5; i++) {
            Cls(i)
        }
        open = false
    }
}

function Drp(n) {
    var elem = document.getElementsByClassName("menu-con")[n];
    var pos = -1 * window.innerHeight - n * 100;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos >= -10) {
            clearInterval(id);
            elem.style.top = 0 + 'px';
        } else {
            pos += 10;
            elem.style.top = pos + 'px';
        }
    }
}

function Cls(n) {
    var elems = document.getElementsByClassName("menu-con")[n];
    var poss = 0;
    var ids = setInterval(frames, 5);

    function frames() {
        if (poss <= -1 * window.innerHeight) {
            clearInterval(ids);
            elems.style.top = -1 * window.innerHeight + 'px';
        } else {
            poss += -7 - n * 2;
            elems.style.top = poss + 'px';
        }
    }
}

Vous pouvez mettre un div dans une balise a, depuis HTML5. Voir cette référence:

https: // css-tricks.com/snippets/jquery/make-entire-div-clickable/

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO