Перемещение Div/кнопок с JQuery

-1

Я сделал слайд из боковой панели, которая выходит при нажатии кнопки/дел, но я хочу, чтобы кнопка/дела выскользнуть с ним тоже здесь является то, что я пыталсяПеремещение Div/кнопок с JQuery

<html> 
<meta name="viewport" content="width=device-width"/> 


<div id="header1"> 
<p>BillIsChill<p> 
<div id="menubutton"> 
<hr id="hr1"> 
<hr id="hr2"> 
<hr id="hr3"> 
</div> 



</div> 


<?php include('sidebar.html');?> 


<script src="/Scripts/script.js" type="text/javascript"></script> 
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">  </script> 
<link type="text/css" rel="stylesheet" href="desktopstyle.css" /> 
<link type="text/css" rel="stylesheet" href="style_darkcyan.css" /> 
<link type="text/css" rel="stylesheet" href="sidebarBETA.css" />  <body> 


<script> 
$(document).on("click", "#menubutton", function(){ 
$('#sidebarright').toggle('slow'); 
}) 
</script>

и вот мой стиль отношения, что я использую

#menubutton.open{ 
right: 205; 
} 
#menubutton{ 
display-inline; 
width:50px; 
height:50px; 
background:#006666; 
float:right; 
border-radius:10px; 
margin-top: 5px; 
margin-bottom: 5px; 
margin-right:5px; 
right: 5px; 

} 
#menubutton:hover{ 
background:cadetblue; 
} 
#sidebarright.open{ 
right: 1; 
}  
#sidebarright{ 
background: darkcyan; 
text-align: center; 
z-index: 2; 
position: fixed; 
height: 100%; 
width: 200px; 
float: right; 
top: 0; 
overflow-y: scroll; 
overflow-x: hidden; 
transition: right 0.5s; 
right:-200; 
}

Может кто-то пожалуйста, помогите мне

источник

2016-05-04 Nik Hendricks

У вас есть HTML-код? – Gerard

Хотя вы могли бы присоединиться к двум обработчикам событий, ничего плохого в коде не видно. Проблема должна заключаться в другом месте вашего кода CSS или JS. К сожалению, никто не сможет вам помочь, если вы не отредактируете свой вопрос, чтобы показать этот код. –

Это просто ди-стиль, похожий на кнопку меню и материал для заголовка, а также стиль ссылок и php –

Я думаю, что блоки кода не отформатированы должным образом. Но ниже css должен исправить вашу проблему.

#menubutton.open{ 
    right: 205; 
} 
#menubutton{ 
    display-inline; 
    width:50px; 
    height:50px; 
    background:#006666; 
    float:right; 
    border-radius:10px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-right:5px; 
    right: 5px; 
} 
#menubutton:hover{ 
    background:cadetblue; 
} 
#sidebarright.open{ 
    right: 1; 
}  
#sidebarright{ 
    background: darkcyan; 
    text-align: center; 
    z-index: 2; 
    position: fixed; 
    height: 100%; 
    width: 200px; 
    float: right; 
    top: 60px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    transition: right 0.5s; 
    right:-200; 
    overflow: auto; 
} 
#header1 { 
    z-index: 3; 
}

источник

2016-05-06 03:47:26

Это работает

<body> 
<style> 
.open { display:none; } 
#buttonWrapper, #optionsWrapper { float:left; } 
ul { margin:0; } 
</style> 
<div id="menu"> 
    <div id="optionsWrapper"> 
    <div id="options" class="open"> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ul> 
    </div> 
    </div> 
    <div id="buttonWrapper"> 
    <button id="button">Click</button> 
    </div> 
</div> 

<script type="text/javascript"> 
$('#button').click(function(){ 
    $('#options').toggleClass('open'); 
}) 
</script> 
</body>

источник

2016-05-04 22:53:44 Gerard

код не работает для меня –

Я создал скрипку для вас: https://jsfiddle.net/beekvang/tvdhqhnz/3/ – Gerard

Я не могу получить плавный переход на работу в css –

Перемещение Div/кнопок с JQuery

ответ

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