You are here

Home » API reference » Smartmenus.js 8

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

Same filename and directory in other branches
  1. 7 css/sm-menu-toggle.css
.block-smartmenus .contextual {
  z-index: 999999;
}
.smartmenus-nav a.sm-link {
  border: 0px;
}
.sm {
  z-index: 998;
}
.nav-brand {
  float: left;
  margin: 0;
}
.nav-brand a {
  display: block;
  padding: 11px 11px 11px 20px;
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

/* Taken from D7 module */
/*
 * @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. .block-smartmenus .contextual {

  2.   z-index: 999999;

  3. }

  4. .smartmenus-nav a.sm-link {

  5.   border: 0px;

  6. }

  7. .sm {

  8.   z-index: 998;

  9. }

  10. .nav-brand {

  11.   float: left;

  12.   margin: 0;

  13. }

  14. .nav-brand a {

  15.   display: block;

  16.   padding: 11px 11px 11px 20px;

  17.   color: #333;

  18.   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  19.   font-size: 22px;

  20.   font-weight: normal;

  21.   line-height: 17px;

  22.   text-decoration: none;

  23. }

  24. 

  25. /* Taken from D7 module */

  26. /*

  27.  * @file

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

  29.  */

  30. .sm-menu-btn {

  31.   position: relative;

  32.   display: inline-block;

  33.   width: 28px;

  34.   height: 28px;

  35.   text-indent: 28px;

  36.   white-space: nowrap;

  37.   overflow: hidden;

  38.   cursor: pointer;

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

  40. }

  41. 

  42. /* hamburger icon */

  43. .sm-menu-btn-icon,

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

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

  46.   position: absolute;

  47.   top: 50%;

  48.   left: 2px;

  49.   height: 2px;

  50.   width: 24px;

  51.   background: #bbb;

  52.   -webkit-transition: all 0.25s;

  53.   transition: all 0.25s;

  54. }

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

  56.   content: '';

  57.   top: -7px;

  58.   left: 0;

  59. }

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

  61.   content: '';

  62.   top: 7px;

  63.   left: 0;

  64. }

  65. 

  66. /* x icon */

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

  68.   height: 0;

  69.   background: transparent;

  70. }

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

  72.   top: 0;

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

  74.   transform: rotate(-45deg);

  75. }

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

  77.   top: 0;

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

  79.   transform: rotate(45deg);

  80. }

  81. 

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

  83. .sm-menu-state {

  84.   position: absolute;

  85.   width: 1px;

  86.   height: 1px;

  87.   margin: -1px;

  88.   border: 0;

  89.   padding: 0;

  90.   overflow: hidden;

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

  92. }

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

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

  95.   display: none;

  96. }

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

  98.   display: block;

  99. }

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

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

  102.   .sm-menu-btn {

  103.     position: absolute;

  104.     top: -99999px;

  105.   }

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

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

  108.     display: block;

  109.   }

  110. }