HTMLNOOB: Problem mit HTML+ CSS

Beitrag lesen

SELF-Forum

Problem mit HTML+ CSS

HTMLNOOB
– Informationen zu den Bewertungsregeln

Hallo!

Ich versuche seit kurzem selber eine Seite zu erstellen und habe 0 Ahnung vom programmieren.

Ich habe diesen Effekt probiert aber irgendwie ist da was schief gelaufen.

Gestern ging es noch..keine Ahnung vermutlich etwas rausgelöscht oder nicht richtig abgespeichert.

Ich habe nur einen schwarzen Balken oben als Header fürs erste und einen Hintergrund.

Habe versucht so ein Pop-Out Menu mit Java zu erstellen aber wie gesagt..plötzlich funktioniert nichts mehr.

Könnt ihr eventuell die Fehler finden?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-utf-8">
    <title>Pop Out Menu</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

    <link rel="stylesheet" href="menu2.css">
    </head>
    <body>
        <div class="header">
        </div>


<div class="container"onclick="expand()">
    <div class="toggle" id="toggle">
        <i class="material-icons" id="add">
            add
        </i>
        </div>
    </div>

<div class="menu" id="menu">
        <div class="item">
             <a href="#">
                <i class="material-icons">home</i>
                </a>
             </div>
           </div>
    <div class="item">
             <a href="#">
        <i class="material-icons">notifications</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">mail</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">add_a_photo</i>
                </a>
             </div>
    <div class="item">
             <a href="#">
        <i class="material-icons">videocam</i>
        </a>
             </div>
        
    <div class="item">
             <a href="#">
            <i class="material-icons">search</i>
            </a>
    </div>
        
        <script type="text/javascript">
            var j=0;
            var i=document.getElementById("menu").childNodes;
            function expand(){
                if(j==0){
                document.getElementById("add").style.transform = 'rotate(45deg)';
                    document.getElementById("menu").style.transform = 'scale(1)';
                    i[1].style.transform='translateY(-160px)';
                     i[3].style.transform='translate(140px,-80px)';
                     i[5].style.transform='translate(140px,80px)';
                     i[7].style.transform='translateY(160px)';
                     i[9].style.transform='translate(-140px,80px)';
                     i[11].style.transform='translate(-140px,-80px)';
                    j=1;
                }
                
            else{
                document.getElementById("add").style.transform = 'rotate(0deg)';
                document.getElementById("menu").style.transform = 'scale(0.9)';
                    i[1].style.transform='translateY(0)';
                 i[3].style.transform='translate(0)';
                     i[5].style.transform='translate(0)';
                     i[7].style.transform='translateY(0)';
                     i[9].style.transform='translate(0)';
                     i[11].style.transform='translate(0)';
                j=0;
                }
                }

        </script>
    </body>
    </html>


body{
    background-color: #2a3a49;
    background: url(darkhoneycomb.png) no-repeat;
    background-size: cover;
    padding-bottom: 800px;
    margin: 0;
}

#left {
    position: absolute;
    top: 60%;
}

#right {
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 1;
}

nav {
    padding: 50px;
}
nav ul {
    list-style-type: none;
    float: right;
}
nav ul li {
    float: left;
}
nav ul li a {
    color: #000000;
    padding: 0 30px;
}

*{
    margin: 0;
    padding:0;
    list-style: none;
    text-decoration: none;
}
.header{
    width: 100%;
    height: 110px;
    display: block;
    background-color: #101010;
}

#logo {
    font-size: 2em;
}
.container {
    text-align: center;
    width: 60%;
    margin: 110px auto;
}

h1 {
    font-size: 1.3em;
    line-height: 1.4em;
}
.container,.menu{
    height: 40px;
    width: 160px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
}
.menu{
    z-index: -1;
    transform: scale(0.9);
}
.toggle{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #FBD244;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
}
.toggle:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #f9d230;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
.item{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
    transition: 1s;
}
.item:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
#add{
    font-size: 100px;
    color: white;
    position: relative;
    top: 20px;
    right: 10px;
    transition: 1s;
}
a>.material-icons{
    color:#d2d2d2;
    font-size: 60px;
}
a{
    position: relative;
    top:40px;
    left: 10px;
}
a>.material-icons:hover{
    color:#f9d230;
    transform: scale(1.3);
      }
a{
    position: relative;
    top: 40px;
    left: 10px;
}
Beitrag melden
–
Informationen zu den Bewertungsregeln