jquery apearing nav слева

Я искал это в течение нескольких часов, и я не могу найти ответ.jquery apearing nav слева

Я работаю над веб-сайтом, я хочу, чтобы навигационная система пришла слева, когда курсор зависает влево.

Я нашел 1 ссылку, которая выглядит очень близко к тому, что я хочу, но каждый раз, когда я пытаюсь это сделать, это не работает! Я попробовал все, что знаю, и внимательно посмотрел, если я скопировал каждую строку на странице.

Это ссылка: http://jsfiddle.net/PktxV/

И это код:

HTML

<div id="sidePanel"> 
<div id="panelContent"> 
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" 
    scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" 
    allowTransparency="true"></iframe> 
</div> 
<div id="panelHandle"> 
    <p>Facebook</p> 
</div>

CSS

/* ===== Primary Styles ======================================================== 
    Author: NTechi | WebsTutorial 
    ========================================================================== */ 
body { 
    font-family:Arial; 
} 
#sidePanel { 
    width:245px; 
    position:fixed; 
    left:-202px; 
    top:15%; 
} 
#panelHandle { 
    background-image: -webkit-linear-gradient(top, #333, #222); 
    background-image: -moz-linear-gradient(center top, #333333, #222222); 
    background-image: -o-linear-gradient(center top, #333333, #222222); 
    background-image: -ms-linear-gradient(center top, #333333, #222222); 
    background-image:linear-gradient(center top, #333333, #222222); 
    height:150px; 
    width:40px; 
    border-radius:0 5px 5px 0; 
    float:left; 
    cursor:pointer; 
} 
#panelContent { 
    float:left; 
    border:1px solid #333333; 
    width:200px; 
    height:300px; 
    background-color:#EEEEEE; 
} 
#panelHandle p { 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    color: #FFFFFF; 
    font-size: 24px; 
    font-weight: bold; 
    left: -4px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 26px; 
}

JQuery

jQuery(function ($) { 
    $(document).ready(function() { 
     $('#panelHandle').hover(function() { 
      $('#sidePanel').stop(true, false).animate({ 
       'left': '0px' 
      }, 900); 
     }, function() { 
      jQuery.noConflict(); 
     }); 

     jQuery('#sidePanel').hover(function() { 
      // Do nothing 
     }, function() { 

      jQuery.noConflict(); 
      jQuery('#sidePanel').animate({ 
       left: '-201px' 
      }, 800); 

     }); 
    }); 
});

Кто-нибудь знает, если это старая версия или что-то или что у него есть проблемы с страницей HTML5 (то, что я пытаюсь сделать) и, возможно, могу получить мне ссылку на новый/Beter слайдер?

EDIT !!

Это, как я его в документе

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
/* ===== Primary Styles ======================================================== 
    Author: NTechi | WebsTutorial 
    ========================================================================== */ 
body { 
    font-family:Arial; 
} 
#sidePanel { 
    width:245px; 
    position:fixed; 
    left:-202px; 
    top:15%; 
} 
#panelHandle { 
    background-image: -webkit-linear-gradient(top, #333, #222); 
    background-image: -moz-linear-gradient(center top, #333333, #222222); 
    background-image: -o-linear-gradient(center top, #333333, #222222); 
    background-image: -ms-linear-gradient(center top, #333333, #222222); 
    background-image:linear-gradient(center top, #333333, #222222); 
    height:150px; 
    width:40px; 
    border-radius:0 5px 5px 0; 
    float:left; 
    cursor:pointer; 
} 
#panelContent { 
    float:left; 
    border:1px solid #333333; 
    width:200px; 
    height:300px; 
    background-color:#EEEEEE; 
} 
#panelHandle p { 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    color: #FFFFFF; 
    font-size: 24px; 
    font-weight: bold; 
    left: -4px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 26px; 
} 
</style> 

</head> 

<body> 
<script src="text/javascript"> 
$(document).ready(function() { 
    $('#sidePanel').hover(function() { 
     $(this).stop(true, false).animate({ 
      'left': '0px' 
     }, 900); 
    }, function() { 
     $(this).stop(true, false).animate({ 
      'left': '-202px' 
     }, 900); 
    }); 
}); 
</script> 
<div id="sidePanel"> 
    <div id="panelContent"> 
     <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" 
     scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" 
     allowTransparency="true"></iframe> 
    </div> 
    <div id="panelHandle"> 
     <p>Facebook</p> 
    </div> 
</div> 
</body> 
</html>

источник

2013-02-22 Ron Pelt

Попробуйте это и увидеть DEMO:

$(document).ready(function() { 
    $('#sidePanel').hover(function() { 
     $(this).stop(true, false).animate({ 
      'left': '0px' 
     }, 900); 
    }, function() { 
     $(this).stop(true, false).animate({ 
      'left': '-202px' 
     }, 900); 
    }); 
});

EDIT:

Изменить все ваши страницы с HTML для этого:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
/* ===== Primary Styles ======================================================== 
    Author: NTechi | WebsTutorial 
    ========================================================================== */ 
body { 
    font-family:Arial; 
} 
#sidePanel { 
    width:245px; 
    position:fixed; 
    left:-202px; 
    top:15%; 
} 
#panelHandle { 
    background-image: -webkit-linear-gradient(top, #333, #222); 
    background-image: -moz-linear-gradient(center top, #333333, #222222); 
    background-image: -o-linear-gradient(center top, #333333, #222222); 
    background-image: -ms-linear-gradient(center top, #333333, #222222); 
    background-image:linear-gradient(center top, #333333, #222222); 
    height:150px; 
    width:40px; 
    border-radius:0 5px 5px 0; 
    float:left; 
    cursor:pointer; 
} 
#panelContent { 
    float:left; 
    border:1px solid #333333; 
    width:200px; 
    height:300px; 
    background-color:#EEEEEE; 
} 
#panelHandle p { 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    color: #FFFFFF; 
    font-size: 24px; 
    font-weight: bold; 
    left: -4px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 26px; 
} 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script> 

$(document).ready(function() { 
    $('#sidePanel').hover(function() { 
     $(this).stop(true, false).animate({ 
      'left': '0px' 
     }, 900); 
    }, function() { 
     $(this).stop(true, false).animate({ 
      'left': '-202px' 
     }, 900); 
    }); 
}); 

</script> 

</head> 


<body> 
<div id="sidePanel"> 
    <div id="panelContent"> 
     <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" 
     scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" 
     allowTransparency="true"></iframe> 
    </div> 
    <div id="panelHandle"> 
     <p>Facebook</p> 
    </div> 
</div> 
</body> 
</html>

источник

2013-02-22 16:06:50 letiagoalves

все тот же. я вижу вкладку facebook, но когда я нажимаю на нее курсор, он не скользит вправо. У меня также есть ощущение, что я просто делаю это неправильно ... –

Я добавил дополнительную информацию, чтобы показать, как я положил ее в документ HTML5 –

@RonPelt, поэтому вы не хотите скользить по осталось после того, как мышь покидает DIV? Он скользит вправо, а затем остается «открытым»? – letiagoalves

HTML5 Может быть, вы не включая библиотеку JQuery и, следовательно, JavaScript не работает.

Какие ошибки вы видите на Вашей странице? Проверьте консоль JavaScript.

источник

2013-02-22 15:53:28 psynnott

вот только это. ошибок нет. Я даже попробовал предупреждение, но он не показывает. –

Я добавил дополнительную информацию, чтобы показать, как я положил ее в документ HTML5 –

ответ

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