Menü ist nicht klickbar

newhtmluser · 11.02.2022

Hallo!

Ich bin totaler Anfänger was HTML und CSS angeht. Ich bin grade dabei eine Webseite für mein Portfolio zu erstellen und bin nun auf das Problem gestoßen, dass mein Menü nicht "klickbar" ist. Das heißt, die einzelnen Menü Punkte sind nicht anklickbar und es erscheint auch keine Zeigefinger-Maus anstelle des Pfeils. Wo liegen die Fehler?
Danke im Voraus.

das ist der HTML:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>LAGUNA AZUR design studio</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="slicknav.css">  
<meta name="viewport" content="width=1200px">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;600;700&display=swap" rel="stylesheet">
 
</head>

<body>
 
 
    <header>
 
        <img src="img/Logo2022.png" alt="Laguna Azur Logo" class="Logo">
     
        <ul id="menu">
    <li><a href="aboutme.html">about me</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">inquiries</a></li>
    <li><a href="#">contact</a></li>
 </ul>
 
    </header>
 
    <main>
 
 
    <div class="row">
        <div class="col"></div>
         
             
                <h1>LAGUNA AZUR</h1>
                <p class="heading-body-copy">premium web design and branding for personal brands, creatives and small businesses</p>
             
        </div>
        </div>
     
        <div class="row">
            <div class="col col-lrg col-md col-sm"><img src="img/Canopee_opener.png" id="gray" alt="canopee"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/Noemi.png" id="gray1" alt="sonnenschirme"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/glitzerndes wasser.jpg" id="gray2" alt="single palm tree"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/zitatalt.png" id="gray3" alt="zitat"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/Sonnenliege.jpg" id="gray4" alt="palm trees on road"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/punkte.png" id="gray5" alt="palm trees  in sky"></div>
         
        </div>
 
    </main>
 
 
 
 
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.slicknav.js"></script>
    <script>
    $(function(){
        $('#menu').slicknav();
    });
</script>
</body>
</html>

und das CSS:

CSS:

@charset "UTF-8";
/* CSS Document */

#gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray1 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray1:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray2 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray2:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray3 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray3:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray4 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray4:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray5 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray5:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

/*Desktop / Global View*/



body {
     font-family: 'Josefin Sans', sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
}

.col {
    float: left;
    padding: 1%;
}


.col-lrg {
    width: 31.3%;
}


.col-lrg img {
    width: 100%;
    height: auto;
    display: block;
}

.Logo {
    width: 12%;
    height: 12%;
}
.slicknav_menu {
  display: none;
}
#menu {
  float: right;
}
#menu li {
  display: inline-block;
}
#menu li a {
  text-decoration: none;
  color: #5f9ea0;
  padding: 8px;
  font-size: 18px;
font-weight: 200;
}
header {
  padding: 10px 20px 20px 20px;
}


.hero {
    background-image: url(img/hero.jpg);
    padding: 52px 0px 52px 0px;
    background-size: cover;

}

.subheading {
    color: #91aaaa;
    font-weight: 400px;
    font-size: 25px;
    padding-left: 0px;
    padding-top: 10px;
    margin-bottom: -40px;
}

h1 {
    color: #91AAAA;
    font-weight: 300;
    font-size: 45px;
    padding-left: 9px;
    padding-top: 25px;
    margin-bottom: -30px;
 
}

.heading-body-copy {
    color: #91aaaa;
    font-weight: 100px;
    font-size: 20px;
    padding-left: 10px;
    padding-top: 20px;
    margin-right: 20%;

}

.inquiries {
    color: #FFFFFF;
    background-color: #91aaaa;
    padding: 10px 25px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-decoration: none;
}

/*Tablet View*/

@media (max-width: 768px) {

#menu li {
    display: block;
    text-align: right;
}

    .col-md {
        width: 48%;
    }

}



/*Mobile View*/

@media (max-width: 400px) {


    .slicknav_menu {
        display: block;
    }

    #menu {
        display: none;
    }
 
    .col-sm {
        width: 100%;
    }

    .col {
        padding: 0%;
    }
}

scatello · 11.02.2022

Hast du mal versucht, diesen Teil wegzulassen:

HTML:

<script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.slicknav.js"></script>
    <script>
    $(function(){
        $('#menu').slicknav();
    });
</script>

basti1012 · 12.02.2022

Es wäre immer sinnvoll, ein testbares Beispiel zu haben.
Wenn ich deinen Code , mit den den richtigen cdn Links teste , habe ich laufendes Ergebnis.
Stell dein Code mal Online, dann können wir vielleicht auch besser sehen was da nicht richtig ist.
Ob das Ergebnis bei Codepen überhaupt das ist, was du willst weiß ich auch nicht, glaube aber nicht und ich weiß nicht wie es aussehen soll.