CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

fluffiknuffi2

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

18.11.2017, 19:53

Sollte reichen, wenn du den CSS-Code fürs das Einblenden an eine Klasse bindest und diese Klasse dann erst per JS hinzufügst.

Woher ich das weiß:Berufserfahrung – Studium + Berufspraxis

fluffiknuffi2

18.11.2017, 20:00

Beispiel: https://jsfiddle.net/5shc8t2t/

cyberfresh27

Fragesteller

07.12.2017, 21:27

Werde ich in Kuerze wohl ausprobieren. Scheint das am leichtesten zu verstehende Beispiel zu sein - bitte, kriegst 'nen Stern :-)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

18.11.2017, 20:01

Du suchst so etwas: https://jsfiddle.net/ubrqkxLp/

Hierbei wird in der Tat die CSS-Klasse ausgewechselt, aber ohne irgendwelche Auskommentierungen. Das wäre zu umständlich, zumal JS keinen Schreibzugriff auf Dateien besitzt.

PS.: Das Klick-Event kann natürlich auch von einem anderen Element ausgelöst werden.

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

18.11.2017, 19:59

Setze einfach die Animation per JS über das jeweilige Attribut. Beispiel:

https://jsfiddle.net/x5rnk6rr/

Bei mehr als einer Operation empfiehlt sich das Hinzufügen und Entfernen spezieller Klassen. Beispiel:

https://jsfiddle.net/x5rnk6rr/1/

Ähnliche Fragen

Warum ist da noch Rand um der Navbar?

Hallo, bin Anfänger und will ne HTML/CSS Seite erstellen. Als erstes Element habe ich eine Navbar eingefügt, aber darum ist noch ein schmaler Rand vom Hintergrund. Wie bekomme ich den weg?

...zur Frage

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

Hallo zusammen,

ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

Danke sehr!

...zur Frage

Wie erstelle ich Milchglas Optik in CSS?

Hallo, Ich habe mir neulich die Frage gestellt wie ich so eine Milchglasoptik [Link entfernt] in CSS hinbekomme.

Wäre nice wenn ihr mir helfen könntet.

...zur Frage

Kann man pur in HTML eine Kommentar Box erstellen und öffentlich diese Kommentare sehen? Oder braucht man dafür auch CSS?

...zur Frage

Wie erstelle ich einen coolen Header, bzw. ein cooles Menü bei CSS/HTML?

Hallo Community,

Ich habe momentan in der Schule das Thema CSS und HTML. Wir müssen nun alle eine eigene Website erstellen. Ich hab mich dann mal auf die Suche nach ein paar coolen Websites gemacht, um mich dabei inspirieren zu lassen. Eine bestimmte Seite hat es mir auch sehr angetan, vor allem der Header, bzw. das Menü oben. Nun wollte ich fragen, wie ich so ein Menü (muss nicht so krass sein) erstellen kann? Muss ich da schon mit Javascript arbeiten oder reicht CSS/HTML aus?

Hier der Link zu der Website: http://rosewatermv.com/

Vielen Dank schon im Voraus.

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

HTML/CSS Bluefish?

Hey kennt sich jemand mit dem Programm Bluefish aus? Ich muss eine HTML und CSS Datei erstellen.

Die HTML Datei bekomme ich meiner Meinung nach hin aber wenn ich die passende CSS Datei erstellen will also auf Dialoge und Linkzu Stylesheet dann bei href gibt es den Link zu der HTMLDatei nicht.

...zur Frage

CSS Links Verschieben?

Hallo,

Ich erstelle eine webseite, auf dieser habe ich nun ein Link, dieser ist mir aber noch etwas zu hoch, ich möchte diesen nun etwas tiefer (formatieren). Wie würde das gehen?

...zur Frage

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

Button in html?

Wie erstelle ich Button in html die man nach links verschieben kann und wenn ein anderer verschoben wird, dass der andere wieder zurück in die ursprüngliche Lage geht.

Wenn möglich sollte der Code (html, css und javascript) möglichst kurz sein und für PC sowie mobile Geräte verfügbar sein.

Danke

...zur Frage

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zur Frage

Wie in HTML und CSS Texte und Bilder verschieben?

Hey! Ich habe angefangen mich mit dem erstellen von Websites zu beschäftigen. Ich bin noch ein sehr sehr blutiger Anfänger und Frage mich deshalb folgende Frage:

Wie in HTML & CSS Bilder & Texte verschieben?

Ich möchte nämlich einen Text & ein Bild von der oberen rechten Ecke, nach unten verschieben.

Ich habe das auch schon mit Padding-Top & Right probiert, jedoch verschiebt sich dann der Rest (NavBar & anderer Text) mit nach unten. Wie löse ich das problem?

Ich nutze Visual Studio Code.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen