вид сбоку DIV

Question

Я хотел бы создать боковую панель к смерти, как это на этом сайте http://gabrieleromanato.com/

Нажатие «значок электронной почты на самом деле, он имеет» эффект я хочу. У меня мало знаний о jquery, поэтому я не могу достичь цели.

Я надеюсь, что некоторые из вас может помочь мне

Заранее спасибо всем

Answer 1

Произнесите DIV, который будет отображаться на щелчок имеет ширину 300px. Ваш DIV CSS должен содержать два свойства по крайней мере,

.div1 { 
    position:fixed; 
    top: 5%; // Use whatever you want 
    width: 300px; 
    left: -300px; // The width of your div, may have to change slightly based on your design. 
} 

Теперь нажав на любой значок говорят ID icon1

$(document).ready(function() { 
    $("#icon1").click(function() { 
     var left = parseInt($(".div1").css('left')) < 0 ? 0 : '-300px'; 

     $(".div1").animate({left: left }, 1000); 
    }); 
}); 

Это может помочь.

Благодаря

Answer 2

jsfiddle является here

Я использовал .animate() для переключения ширины коробки.

HTML:

<div id="box"> 
    <div id="opener">Opener</div> 
    <div id="message">This is the message</div> 
</div> 

CSS:

#box { 
    position:fixed; 
    top: 20px; 
    left: 0; 
    width: 200px; 
    height: 400px; 
} 
#opener { 
    position: relative; 
    float: right; 
    right: 0; 
    top: 0; 
    width: 40px; 
    height: 40px; 
    background: #000; 
    overflow: hidden; 
} 
#message { 
    float: left; 
    overflow: hidden; 
    background: #f00; 
    width: 160px; 
} 

JQuery:

$(document).ready(function() { 

    $("#box").css("width", "40px"); 
    $("#message").css("width", "0px"); 

    var show = 0; 

    $("#opener").click(function() { 
     if (show === 0) { 
      $("#box").animate({ 
       width: '200px' 
      }); 
      $("#message").animate({ 
       width: '160px' 
      }); 
      show = 1; 
     } else { 
      $("#box").animate({ 
       width: '40px' 
      }); 
      $("#message").animate({ 
       width: '0px' 
      }); 
      show = 0; 
     } 
    }); 
}); 

Вы можете в любое время обобщить JQuery, так что вам не нужно использовать жестко закодированные значения.