• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Simple Off canvas Navigation

Dane315

Dane315

Mitglied
HI Leute habe diesen Code hier: http://cssdeck.com/labs/simple-off-canvas-navigasi
ich verstehe aber noch ziemlich wenig von JS. Könnte mir bitte jemand erklären wie ich diese paar zeilen javascript von cssdeck einbinden muss in eine eigene datei auf meinem rechner... ich glaube da fehlt das grundgerüst wie bei html... oder ist das wie bei css das kein grundgerüst benötigt wird? wenn ich den js code einfach ich eine js datei packe und im html dokument im head einbinde funktioniert das nicht da muss etwas fehlen...
 
Werbung:
Wenn ich den JS Code so
<script type="text/javascript">
$('#button').on('click', function() {
$('#content').toggleClass('isOpen');
$(this).toggleClass('active');
});
</script>
in die HTML Datei einfüge was ja hoffe ich so sein kann... funktioniert es trotzdem nicht... was ist falsch..
 
Das mit dem Einbinden des Javascript ist schon mal richtig. Hast Du auch das HTML und das CSS in deine Datei eingefügt?
 
Werbung:
Hallo,


hast aucg jquery eingebunden, ohne das geht nichts.
Schau da mal bei HTML

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Cheffchen
 
Ja also html grundgerüst steht css ist eingebunden und funktioniert einwandfrei das akann ich ja und verstehe ich ja auch aber javascript funtzt trotzdem nicht... könnte das am veralteten doctype liegen das mir dreamweaver erstellt hat?


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />


       
</head>

<body>

<script type="text/javascript">
    $('#button').on('click', function() {
  $('#content').toggleClass('isOpen');
  $(this).toggleClass('active');
});
</script>

<nav id="sidebar">
  <ul>
    <li><a>Dashboard</a></li>
    <li><a>Statistics</a></li>
    <li><a>Milestones</a></li>
    <li><a>Settings</a></li>
    <li><a>Logout</a></li>
  </ul>
</nav>

<div id="content">
  <div id="header">
    <span id="button"></span>
  </div>
  <h1>Amazingly simple off canvas navigation</h1>
  <h2>with Flexbox & toogleClass</h2>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</body>
</html>

Code: 
@import url('http://fonts.googleapis.com/css?family=Lato:300');
@import url('http://weloveiconfonts.com/api/?family=fontawesome');

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  font: 1em/1 Lato, sans-serif;
  color: #777;
  background: #555;
  overflow-x: hidden;
}

h1, h2 {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 300;
}

h2 {
  font-size: 30px;
  color: #aaa;
}

#sidebar {
  position: absolute;
  width: 260px;
}

#sidebar ul {
  padding: 20px;
  list-style: none;
}

#sidebar li a {
  display: block;
  padding: 20px;
  color: #fff;
}

#sidebar li:not(:last-child) a {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#content {
  flex: 1;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  transform: translate3d(0,0,0);
  transition: transform .3s;
}

#content.isOpen {
  transform: translate3d(260px,0,0);
}

#header {
  height: 50px;
  margin: -30px -30px 30px -30px;
  background: #579;
}

#button {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.1);
  transition: background .3s;
}

#button:before {
  content:"\f0c9";
  font: 28px/50px 'FontAwesome';
  color: #fff;
}

#button:hover {
  cursor: pointer;
  background: rgba(0,0,0,.25);
}

#button.active {
  background: rgba(0,0,0,.5);
}
 
hmm am doctype liegt es nicht, ist jetzt auf html 5... wenn ihr den code oben so in 1 html datei packt und den css in style.css funktioniert es bei euch?
 
Werbung:
Wie wäre es denn, wenn du in Konsole der Konsole deines Browsers nach möglichen JS Fehlern schaust? Außerdem bindest du das Script ein, bevor die DOM-Elemente erzeugt wurden.
 
Hallo,

das soll heisen, das den <script type="text/javascript"> ... </script> block nach dem <script class="cssdeck" .... einfügen solltest da so die reinfolge nicht stimmt.

Cheffchen
 
Hmm ja da ist wohl eine variable oder so nicht ($) definiert danke für den tipp mit der konsole habe ich noch nicht gekannt... und auch die reihenfolge ist wichtig? okay! werde ich mir merken
also scheinbar ist einfach der code nicht richtig... sowas blödes das die kaputten code da reinmachen -.-
 
Werbung:
Hmm versteh ich nicht im CSS Deck funktioniert der js code ja wenn ich dran was verändere dann geht er nichtmal dort... muss wohl doch was mit dem einbinden zu tun haben...
kriegt jemand die vorlage auf seinem rechner zum laufen?
 
aaarrg ich probiere jetzt ein tutorial von einer anderen site... soll angeblich komplett ohne JS gehen
 
Werbung:
Werbung:
.nav-trigger + label, .site-wrap, {
transition: left 0.7s;
}

.nav-trigger:checked + label {
left: 200px;
}

.nav-trigger:checked ~ .site-wrap {
left: 230px;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben