Habe die Seite nicht mehr aber vielleicht kann mir jemand erklären was ich falsch gemacht habe?
Wenn du uns verrätst, wie wir das ohne Glaskugel hinbekommen sollen ...
Das CSS ist in Sass kodiert, hast Du das auch kompiliert? (Unten rechts auf "View compiled" drücken.)
Das CSS ist in Sass kodiert, hast Du das auch kompiliert? (Unten rechts auf "View compiled" drücken.)
Ich bin mal so frei.
Weil ich wußte es damals auch nicht wie das geht
<html>
<head>
<style>
body {
background-color: salmon;
}
.menu {
position: relative;
}
.menu span {
position: absolute;
background-color: black;
padding: 15px 10px;
border: 3px solid white;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.menu span.hidden {
visibility: hidden;
}
.menu span:last-child {
padding: 13px 15px;
}
.menu span:nth-child(1) {
background-color: lightblue;
padding: 15px 15px;
}
.menu span:nth-child(1).show {
-webkit-transform: rotate(0deg) translate(100px) rotate(0deg);
transform: rotate(0deg) translate(100px) rotate(0deg);
}
.menu span:nth-child(2) {
background-color: darkblue;
}
.menu span:nth-child(2).show {
-webkit-transform: rotate(45deg) translate(100px) rotate(-45deg);
transform: rotate(45deg) translate(100px) rotate(-45deg);
}
.menu span:nth-child(3) {
background-color: red;
}
.menu span:nth-child(3).show {
-webkit-transform: rotate(90deg) translate(100px) rotate(-90deg);
transform: rotate(90deg) translate(100px) rotate(-90deg);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu">
<span class="fa fa-twitter fa-2x fa-inverse f-fw hidden"></span>
<span class="fa fa-facebook fa-2x fa-inverse fa-fw hidden"></span>
<span class="fa fa-pinterest fa-2x fa-inverse fa-fw hidden"></span>
<span class="fa fa-bars fa-2x fa-inverse f-fw"></span>
</div>
<script>
$(document).ready(function(){
$('.menu span:last-child').click(function(){
$('.menu span').not(':last-child').toggleClass('hidden show') ;
})
})
</script>
</body>
</html>Aaaarrrgh, hier bekommt man nur Beifall, wenn man code ready-for-copy-and-paste liefert. Eigeninitiative? Fehlanzeige.
Hier genau so:
das Beispiel finde ich besser weil da wurde richtig viel hilfe geleistet
Aaaarrrgh, hier bekommt man nur Beifall, wenn man code ready-for-copy-and-paste liefert.
Schlimm genug, dass manche auch immer wieder fertigen Code liefern, anstatt Hinweise zu geben, wie man es machen könnte.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
