Меню слайдов из фона влево

------------- 
    | header | 
    ------------ 
    | |  | 
    | L|content | 
    | |  | 
    ------------- 

    ------------- 
    | header | 
---------------- 
| <- |   | 
| L |content | 
| <- |   | 
-----------------

Мне нужно создать коробку JQuery шириной 250 пикселей и высотой 300 пикселей. Он будет состоять из (1) заголовка (2) небольшого бара слева, который должен переключать слайд влево (для отображения меню) и обратно в исходное положение при щелчке и (3) в правой части содержимого. Я довольно новичок в JQuery и могу думать о следующем коде, который работает более или менее в хроме, но в IE сильно не работает.Меню слайдов из фона влево

<html> 
<head> 
    <script src="jquery[1].js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #gcontainer { 
      height:300px; 
      width:350px; 
      background-color:#ffffff; 
      margin-left:100px; 

     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:0px; 
      position:relative; 
      z-index:0; 
      overflow:hidden: 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 


<div id="gcontainer"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 

</body> 
</html>

, пожалуйста, предложите.

источник

2011-11-21 helloworld

Проблема здесь, кажется, с вашим HTML/CSS, а не с javascript/jquery. Во-первых, вы не должны иметь несколько div с одинаковым ID. Поэтому я не уверен, почему у вас есть #gcontainer два раза. Если вы хотите применить один и тот же стиль к нескольким div, используйте классы. В вашем css вы ставите стиль #gcontainer дважды, что также не имеет смысла, поскольку второй раз перезаписывает первый. Также не забудьте всегда добавлять <!DOCTYPE html> в начало ваших страниц, или браузеры будут отображаться в режиме quirks, который может делать всевозможные неожиданные вещи.

В любом случае, я удалил лишний #gконтейнер в HTML и CSS и отредактировал некоторые поля. Наконец, я добавил обертку вокруг всего предмета и поместил поле слева, поэтому ваш слайд не исчезнет с экрана. Это должно работать в IE и Chrome:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #wrapper { 
     margin-left: 100px; 
     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:-130px; 
      position:relative; 
      z-index:0; 
      overflow:hidden; 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 
</body> 
</html>

источник

2011-11-21 10:11:31

Hi Sanketh ... Спасибо. Он отлично работает как в IE, так и в Chrome. Тем не менее, есть еще один незначительный глюк ... Когда лоток слайдера прокручивается влево, вы увидите, что слайдер на мгновение меняет свою ширину, что заставляет «Открыть» отрезать в течение секунды. Как решить эту проблему, поскольку это не приводит к аккуратной и аккуратной анимации. Благодарю. – helloworld

Если вы замедляете слайд (смените «медленный» на число в миллисекундах), это, возможно, будет выглядеть более гладко. Если вас просто беспокоит обрезание текста, вы всегда можете просто добавить некоторые дополнения вокруг Open. Кроме этого, вы можете посмотреть на использование другого инструмента, такого как [jQuery Easing Plugin] (http://gsgd.co.uk/sandbox/jquery/easing/) или [jQuery UI's Effect] (http: // jqueryui .com/docs/effect /), которые могут предложить еще несколько вариантов плавности. Надеемся, что эта помощь –

Меню слайдов из фона влево

ответ

Смежные вопросы