You are here

Home » API reference » Smartmenus.js 7

sm-menu-toggle.css in Smartmenus.js 7

Same filename and directory in other branches
  1. 8 css/sm-menu-toggle.css
/*
 * @file
 * CSS for the responsive menu toggle checkbox / button.
 */
.sm-menu-btn {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* hamburger icon */
.sm-menu-btn-icon,
.sm-menu-btn-icon:before,
.sm-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.sm-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.sm-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}

/* x icon */
.sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon {
  height: 0;
  background: transparent;
}
.sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* hide menu state checkbox (keep it visible to screen readers) */
.sm-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
/* hide the menu in mobile view */
.sm-menu-state:not(:checked) ~ .sm {
  display: none;
}
.sm-menu-state:checked ~ .sm {
  display: block;
}
@media (min-width: 768px) {
  /* hide the button in desktop view */
  .sm-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  .sm-menu-state:not(:checked) ~ .sm {
    display: block;
  }
}

File

css/sm-menu-toggle.css
View source 
  1. /*

  2.  * @file

  3.  * CSS for the responsive menu toggle checkbox / button.

  4.  */

  5. .sm-menu-btn {

  6.   position: relative;

  7.   display: inline-block;

  8.   width: 28px;

  9.   height: 28px;

  10.   text-indent: 28px;

  11.   white-space: nowrap;

  12.   overflow: hidden;

  13.   cursor: pointer;

  14.   -webkit-tap-highlight-color: rgba(0,0,0,0);

  15. }

  16. 

  17. /* hamburger icon */

  18. .sm-menu-btn-icon,

  19. .sm-menu-btn-icon:before,

  20. .sm-menu-btn-icon:after {

  21.   position: absolute;

  22.   top: 50%;

  23.   left: 2px;

  24.   height: 2px;

  25.   width: 24px;

  26.   background: #bbb;

  27.   -webkit-transition: all 0.25s;

  28.   transition: all 0.25s;

  29. }

  30. .sm-menu-btn-icon:before {

  31.   content: '';

  32.   top: -7px;

  33.   left: 0;

  34. }

  35. .sm-menu-btn-icon:after {

  36.   content: '';

  37.   top: 7px;

  38.   left: 0;

  39. }

  40. 

  41. /* x icon */

  42. .sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon {

  43.   height: 0;

  44.   background: transparent;

  45. }

  46. .sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon:before {

  47.   top: 0;

  48.   -webkit-transform: rotate(-45deg);

  49.   transform: rotate(-45deg);

  50. }

  51. .sm-menu-state:checked ~ .sm-menu-btn .sm-menu-btn-icon:after {

  52.   top: 0;

  53.   -webkit-transform: rotate(45deg);

  54.   transform: rotate(45deg);

  55. }

  56. 

  57. /* hide menu state checkbox (keep it visible to screen readers) */

  58. .sm-menu-state {

  59.   position: absolute;

  60.   width: 1px;

  61.   height: 1px;

  62.   margin: -1px;

  63.   border: 0;

  64.   padding: 0;

  65.   overflow: hidden;

  66.   clip: rect(1px,1px,1px,1px);

  67. }

  68. /* hide the menu in mobile view */

  69. .sm-menu-state:not(:checked) ~ .sm {

  70.   display: none;

  71. }

  72. .sm-menu-state:checked ~ .sm {

  73.   display: block;

  74. }

  75. @media (min-width: 768px) {

  76.   /* hide the button in desktop view */

  77.   .sm-menu-btn {

  78.     position: absolute;

  79.     top: -99999px;

  80.   }

  81.   /* always show the menu in desktop view */

  82.   .sm-menu-state:not(:checked) ~ .sm {

  83.     display: block;

  84.   }

  85. }