Toggle sidebar-div mit einem weiteren div mit CSS/Javascript

hier ist meine situation:

So, ich bin versucht zu ändern, sidebar, indem Sie auf anderen div. Es ist ein 100% Höhe sidebar, die ist fest an der rechten Seite des Viewports. Im wesentlichen versuche ich zu wickeln, ein 300px div um die 50px breit toggle-div und der 250px Breite sidebar-div, und ich möchte die Seitenleiste ausblenden Teil mit einem negativen margin-right pixel-Wert. Mit Hilfe der .toggle:active-Selektor (dies tritt auf, wenn der toggle-div geklickt wird), möchte ich zeigen, die sidebar-Teil durch die Einstellung, dass margin-right pixel-Wert wieder auf 0px.

Code so weit:

<div class="wrapper">
  <a href="#">
    <div class="toggle">Toggle</div>
  </a>
  <div class="cart">Cart</div>
</div>

CSS so weit:

.wrapper {
  position:fixed;
  width:300px;
  height:100%;
  background-color:orange;
  top:0;
  right:0;
  margin-right:-250px;
}
.toggle {
  position:relative;
  display:block;
  width:50px;
  height:100%;
  background-color:grey;
  float:left;
}
.toggle:active .wrapper {
  margin-right:0px;
}
.cart {
  position: relative;
  width:250px;
  height:100%;
  background-color:red;
  float:right;
}

Hier ist das jsfiddle!

Hier ist meine Frage:

Wie kann ich das Ziel .wrapper zum ändern einer css-Attribut, wenn .toggle:aktiv engagiert ist? Auch, wie kann ich angeben, wenn die Seitenleiste sichtbar ist, und wenn es das nicht?

Ich bin neu in Javascript, aber wie es scheint, ich werde es brauchen, um dies zu tun durch die callback-Funktion. Wenn CSS-only ist möglich, ich würde tendieren zu dieser Lösung. Bitte beachten Sie, dass ich verwenden möchten, margin-right, so dass ich entscheiden, um mithilfe von CSS-transitions später zu animieren, mein element, Schiebetüren Links und rechts.

InformationsquelleAutor Betafresh Media | 2013-01-22
  1. 1

    Ich würde empfehlen die Verwendung von jQuery für diese. Es ist einfacher und weniger Chancen für Fehler. 

    $('.toggle').click(function() {
    $('.cart').toggle();
});

    http://api.jquery.com/toggle/

    • Dies funktionierte gut, aber ich habe es geändert auf meine Bedürfnisse anzupassen (mit Rückruf). Das jsfiddle wir Danken Ihnen herzlich!
    • Ich weiß nicht, wie die Idee, eine ganze aufgeblähte Bibliothek zu einer so grundlegenden Sache, wenn Sie leicht tun können, es mit reinen js oder einfach nur css. IMHO
    • Ich Stimme mit Ihnen überein. Es ist albern, aber ich persönlich möchte die jQuery für Dinge wie diese. Ich dachte, dass vielleicht, wenn er andere features wie diese, dann könnte er wechseln Sie über zu jQuery-wie gut, wenn dies jedoch die einzige Instanz, die dann js oder CSS wäre besser.
    InformationsquelleAutor Michael Garrison
  2. 4

    Nur CSS Lösung

    DEMO: http://jsfiddle.net/Victornpb/yJYJC/30/

    Nutzen Sie einfach dieses:

    /* Closed */
.wrapper{
    margin-right:-250px; 
}

/* Opened */
.wrapper:hover{
    margin-right:0px;
}

    Javascript-Lösung

    DEMO: http://jsfiddle.net/Victornpb/yJYJC/6/

    JS:

    var wrapper = document.getElementsByClassName('wrapper')[0];
var toggle = document.getElementsByClassName('toggle')[0];

window.onload=function(){

    toggle.onclick=function(){
        wrapper.classList.toggle('opened'); 
    }

}

    CSS:

    .wrapper{
    position:fixed;
    width:300px;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-250px;
}
.wrapper.opened{
    margin-right:0px;
}
    InformationsquelleAutor Vitim.us
  3. 2

    CSS-only Lösung (DEMO):

    <div class="wrapper">    
  <label for="toggle">
     Toggle
  </label>    
  <input id="toggle" type="checkbox" />
  <div class="cart">Cart</div>
</div>

    (Die versteckte checkbox wird verwendet, um zu bestimmen, den toggle-Zustand)

    #toggle {    
  display:none; /* hide checkbox */
}

/* the label associated with the checkbox (trigger) */
label{
  display:block;
}

/* move the div adjacent to the input (.cart) inside the visible area */
/* when the input is checked */
#toggle:checked ~ .cart{
  right:0;
}

/* the div that's being toggled */
.cart {
  position: absolute;
  width: 250px;
  height: 100%;
  right: -250px;
}
    InformationsquelleAutor nice ass
  4. 1

    :active funktioniert nur mit links (also <a> - tags), so kann es nicht verwendet werden .toggle, da es ein <div>. Auch wenn man es auf dem link, ich glaube nicht, es werde tun, was Sie wollen, obwohl, und es gibt keinen Weg zum "Ziel" der Eltern.
    Mit einem <a> um einen <div> wie, ist ziemlich seltsam zu, sollten Sie nicht brauchen, die.

    So, müssen Sie javascript, ja. Aber man kann nicht wirklich Ziel einer Klasse in javascript. Sie haben zwei Lösungen:

    1. Wenn Sie hinzufügen können id auf der banderole, können Sie erstellen eine Funktion in javascript, schaltet der Zustand der Seitenleiste:

      <div class="wrapper" id="myId">
    <a href="#">
        <div class="toggle"
             onclick="document.getElementById('myId').style.marginRight = (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0';">Toggle</div>
    </a>
    <div class="cart">Cart</div>
</div>

      Anmerkungen: Der Teil (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0' tests, wenn die margin-right 0 ist und wenn ja, ändert es auf 250px und Umgekehrt. Was ich getan habe, hier vielleicht auch nicht der beste Weg, dies zu tun, aber ich wollte, es zu begrenzen, etwas kurz, so dass Sie können verwenden Sie es auf diese Weise, wenn Sie nicht wirklich verstehen, javascript-sehr gut. Sie werden in der Lage sein, um es zu verbessern, wenn Sie bekommen werden, um es besser zu wissen.
      Auch Sie haben, um die onclick auf jeden .toggle div haben Sie... können Sie event-Handler, aber ich bin mir ziemlich sicher, dass Sie nicht wissen, was das bedeutet und dass möglicherweise nicht eine gute Idee sein, einfach kopieren-einfügen. Sie können immer mit dem zweiten Punkt an, denn es macht die Sache relativ einfach zu verstehen.

    2. Wenn Sie wirklich wollen, die class (oder wiederholen müssen, was eine Menge), verwenden Sie jQuery, eine javascript-Bibliothek, indem diese (vorzugsweise in der <head>):

      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

      Dann können Sie diese (auf den Kopf möglichst still):

      <script type="text/javascript">
    $(document).ready( function()
    {
        var cart_visible = false;

        $('.toggle').on('click', function()
        {
            if ( cart_visible )
                $('.wrapper').css('margin-right', '-250px');
            else
                $('.wrapper').css('margin-right', '0');

            cart_visible = !cart_visible;
        });
    });
</script>

      Dieses mal habe ich eine boolean (das dauert true oder false als Wert) zu überprüfen, wenn der Wagen sichtbar war oder nicht, ändern Sie den Wert bei jedem Klick auf den gleichen Zeitpunkt wie die margin-right. Dieser macht das gleiche wie vorher, nur schaltet zwischen -250px und 0, aber Sie brauchen nicht, um es in jeder .wechseln Sie erstellen können und es funktioniert mit der a-Klasse. Es macht Sie jQuery verwenden, obwohl (das ist nicht wirklich ein problem aber ich denke)

    Sehe ich nicht wirklich, warum Sie ändern möchten margin-right obwohl... Wenn Sie wollen einfach nur, um es verschwinden, können Sie display: none; oder wenn Sie wirklich wollen, ändern Sie die position, die Sie verwenden können right (in diesem Fall).

    • Hum stimmt, ich vergaß, dass.. Naja, display: none noch, dass, obwohl. Ich werde Bearbeiten, dass..
    InformationsquelleAutor Sk8erOfBodom
  5. 1

    Nur CSS, zwei Seitenleiste mit verschiedenen Verhalten

    Gibt es zwei verschiedenen CSS nur animierte sidebar:

    1. inspiriert von @witim.uns, verwenden Sie hover für ein - /ausblenden
    2. inspiriert von @niceass, verwenden Sie eine versteckte checkbox zu klicken Sie auf für ein - /ausblenden

    Features:

    • Glatte animation
    • Vertikale text auf der sidebar (welche drehen, wenn offen)
    • Größe Körper, wenn die sidebar angezeigt werden
    • Saubere box für den Körper und die sidebar
    • scrollbaren Seitenleiste (die Anzeige seiner scrollbar).

    hover (entstanden aus @witim.uns die Antwort) mit einigen Verbesserungen

    Wenn nicht vollständig abgeschlossen, es gibt einiges zu

    • schreiben Open cart /Your cart verticaly
    • unterdrücken newline zwischen Öffnen/Ihre und Warenkorb mithilfe nicht-breakable space in der CSS.
    • Größe Hauptinhalt dynamicaly, während der side-bar angezeigt wird.

    CSS:

    body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
.wrapper:hover ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
.inner {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(90deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}

/* opened */
.wrapper.opened,
.wrapper:hover{
    margin-right:0px;
}

.toggle {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
.wrapper:hover .toggle{
	background-color: #555;
    color: white;
}
.wrapper:hover .toggle .inner{
    transform: rotate(270deg);
}
/* Warn: there is NBSP, not spaces, after Open/Your */
.wrapper:not(:hover) .toggle .inner:before{
	content:"Open";
}
.wrapper:hover .toggle .inner:before{
	content:"Your";
}

.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}

    HTML:

    <div class="wrapper">
    <div class="toggle"><div class="inner">&nbsp;cart</div></div>
    <div class="cart">
        <h2>Cart</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

    toggle:checked (entstanden aus @niceass Antwort)

    Gleichen Verbesserungen, aber mit einem unsichtbare checkbox, so dass Sie haben, klicken Sie auf (text) der Seitenleiste, um Sie zu öffnen.

    CSS:

    body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
#toggle { display:none; }
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
#toggle:checked ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
#toggle:checked ~ .wrapper {
    margin-right: 0pt;
}
#but {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(270deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}
/* opened */
#zone {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
#toggle:checked ~ .wrapper #zone {
	background-color: #555;
    color: white;
}
#toggle:checked ~ .wrapper #zone #but {
    color: white;
    transform: rotate(90deg);
}
#toggle:not(checked) ~ .wrapper #zone #but:before {
	content:"Open ";    /* non break space &#160; */
}
#toggle:checked ~ .wrapper #zone #but:before{
	content:"☒ Your ";
}
#toggle:not(checked) ~ .wrapper #zone #but:after {
	content:" ☐";        /* figure space &#8199; */
}
#toggle:checked ~ .wrapper #zone #but:after {
	content:"";
}
.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}

    HTML:

    <input id="toggle" type="checkbox" />  
<div class="wrapper">
    <div id="zone"><label for="toggle" id="but">chart</label></div>
    <div class="cart">
        <h2>Cart</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

    • Beachten Sie, dass css-calc wird als schlechte Praxis, weil Sie hinzufügen können massive overhead.
    • Gute Bemerkung, danke, ich bleibe bewusst über diese!
    • Ja! Heute, ich habe whipe bugs Weg! Die Warenkorb jetzt scrollbaren, durch hinzufügen overflow:scroll Eigenschaft div Warenkorb.
    • Ich bin damit einverstanden, unfortunely, dies ist der einzige Weg, um zu berechnen, richtig sidebar position als div gedreht 90degree.
    InformationsquelleAutor F. Hauri
Schreibe einen Kommentar