You are here

Home » API reference » Responsive Menus 7

responsive_menus_simple.css in Responsive Menus 7

Same filename and directory in other branches
  1. 8 styles/responsive_menus_simple/css/responsive_menus_simple.css

CSS & media queries for responsive_menus_simple style.

File

styles/responsive_menus_simple/css/responsive_menus_simple.css
View source 
  1. /**

  2.  * @file

  3.  *   CSS & media queries for responsive_menus_simple style.

  4.  */

  5. 

  6. /* Responsive mode, engage! */

  7. .responsive-menus.responsified {

  8.   clear: both;

  9.   width: 100%;

  10. }

  11. 

  12. .responsive-menus.responsified span.toggler {

  13.   padding: 1px;

  14.   display: block;

  15.   background: #333;

  16.   color: #fff;

  17.   border-radius: 5px;

  18.   box-shadow: 2px 2px 2px #000;

  19.   font-size: 1.35em;

  20.   text-align: center;

  21.   cursor: pointer;

  22.   outline: none;

  23. }

  24. 

  25. .responsive-menus.responsified.responsive-toggled span.toggler {

  26.   border-bottom-left-radius: 0;

  27.   border-bottom-right-radius: 0;

  28.   border-bottom: 1px solid #bbb;

  29. }

  30. 

  31. .responsive-menus.responsified .responsive-menus-simple {

  32.   display: none;

  33.   width: 100%;

  34.   background: #333;

  35.   border-bottom-right-radius: 4px;

  36.   border-bottom-left-radius: 4px;

  37.   box-shadow: 2px 2px 2px #000;

  38. }

  39. 

  40. .responsive-menus.responsified.responsive-toggled .responsive-menus-simple,

  41. .responsive-menus.responsified.responsive-toggled .responsive-menus-simple ul {

  42.   display: block;

  43.   padding: 0;

  44.   margin: 0;

  45. }

  46. 

  47. .responsive-menus.responsified.responsive-toggled.absolute {

  48.   position: relative;

  49.   z-index: 999;

  50. }

  51. 

  52. .responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple {

  53.   position: absolute;

  54.   z-index: 999;

  55.   top: auto;

  56. }

  57. 

  58. .responsive-menus.responsified .responsive-menus-simple li {

  59.   width: 100%;

  60.   display: block;

  61.   padding: 0;

  62.   margin: 0;

  63.   clear: both;

  64.   list-style: none;

  65. }

  66. 

  67. .responsive-menus.responsified .responsive-menus-simple li a {

  68.   color: #fff;

  69.   display: block;

  70.   padding: 1em 5%;

  71.   margin: 0;

  72.   text-align: left;

  73.   color: #fff;

  74.   border-bottom: 1px solid #bbb;

  75.   border-bottom: 1px solid rgba(255,255,255,0.5);

  76.   text-decoration: none;

  77.   text-transform: uppercase;

  78. }

  79. 

  80. .responsive-menus.responsified .responsive-menus-simple>li.last a {

  81.   border-bottom: none;

  82. }

  83. 

  84. .responsive-menus.responsified .responsive-menus-simple li ul li a {

  85.   padding: 1em 0 1em 10%;

  86. }

  87. 

  88. .responsive-menus.responsified .responsive-menus-simple li ul li ul li a {

  89.   padding: 1em 0 1em 15%;

  90. }

  91. 

  92. .responsive-menus.responsified .responsive-menus-simple li ul {

  93.   display: block !important;

  94.   visibility: visible !important;

  95.   margin: 0;

  96.   padding: 0;

  97. }

  98. 

  99. /* Inactive rule */

  100. .responsive-menus span.toggler {

  101.   display: none;

  102. }