Advertisement
Guest User

Untitled

a guest
Aug 21st, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.59 KB | None | 0 0
  1. <div class="splitter-left ">
  2. <div class="close-left-btn">
  3. <button class="btn btn-primary" id="toggle-menu">Click me</button>
  4. </div>
  5. <div class="container-fluid content-close">
  6. <div class="row">
  7. <div class="col-4">
  8. <p>Home</p>
  9. </div>
  10. <div class="col-4">
  11. <p>About</p>
  12. </div>
  13. <div class="col-4">
  14. <p>Contact</p>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19.  
  20.  
  21. <div class="splitter-right">
  22. <div class="container-fluid">
  23. <div class="row">
  24. <div class="col-12">
  25. <strong>Header options</strong>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30.  
  31. .splitter-left {
  32. display: inline-block;
  33. width: 25%;
  34. max-width: 300px;
  35. min-width: 250px;
  36. background-color: #fff;
  37. margin-top: 10px;
  38. margin-left: -35px;
  39. vertical-align: top;
  40. }
  41.  
  42. .splitter-right {
  43. display: inline-block;
  44. width: 85%;
  45. margin-top: 10px;
  46. position: relative;
  47. left: 50px;
  48. min-height: 400px;
  49. }
  50.  
  51. $("#toggle-menu").click(function () {
  52. if ($(".content-close").toggle()) {
  53. $(".splitter-left").toggleClass('sidemenu-close')
  54. $(".splitter-right").css({ width: '100%' });
  55. else {
  56. $(".splitter-right").css({ width: '75%' });
  57. }
  58. });
  59.  
  60. .sidemenu-close {
  61. width: 0% !important;
  62. min-width: 0% !important;
  63. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement