Commit 15090788649aa4ac8f588311a6ce19845d334fe3
1 parent
20a86a7b
Exists in
master
Ajustando menu dropdown para telas menores
Showing
2 changed files
with
26 additions
and
34 deletions
Show diff stats
recipes/default/assets/estilo-barra.scss
| @@ -8,7 +8,6 @@ | @@ -8,7 +8,6 @@ | ||
| 8 | div, a, ul, li { | 8 | div, a, ul, li { |
| 9 | margin: 0; | 9 | margin: 0; |
| 10 | padding: 0; | 10 | padding: 0; |
| 11 | - border: 0; | ||
| 12 | font-size: 100%; | 11 | font-size: 100%; |
| 13 | font-family: inherit; | 12 | font-family: inherit; |
| 14 | vertical-align: baseline; | 13 | vertical-align: baseline; |
| @@ -96,53 +95,46 @@ div#wrapper-barra-brasil { | @@ -96,53 +95,46 @@ div#wrapper-barra-brasil { | ||
| 96 | #menu-icon { | 95 | #menu-icon { |
| 97 | display: hidden; | 96 | display: hidden; |
| 98 | width: 35px; | 97 | width: 35px; |
| 99 | - height: 23px; | ||
| 100 | - background: embed("imagens/menu.png") no-repeat center; | ||
| 101 | -} | ||
| 102 | - | ||
| 103 | -a:hover#menu-icon { | ||
| 104 | - background-color: #dfdfdf; | ||
| 105 | - border-radius: 4px 4px 0 0; | 98 | + height: 22px; |
| 99 | + background: #f1f1f1 embed("imagens/menu.png") no-repeat center; | ||
| 100 | + border-bottom: 1px solid #DFDFDF; | ||
| 106 | } | 101 | } |
| 107 | 102 | ||
| 108 | @media only screen and (max-width: 959px) { | 103 | @media only screen and (max-width: 959px) { |
| 109 | - #barra-brasil #menu-icon { display:inline-block; float: right; margin: 5px; | ||
| 110 | - background-size: 70%;} | ||
| 111 | - | ||
| 112 | - #barra-brasil nav ul, #barra-brasil nav:active ul { | ||
| 113 | - display: none; | ||
| 114 | - position: absolute; | ||
| 115 | - padding: 0; | ||
| 116 | - background: #fff; | ||
| 117 | - width: 50%; | 104 | + #barra-brasil #menu-icon { |
| 105 | + display:inline-block; | ||
| 106 | + float: right; | ||
| 107 | + padding: 5px; | ||
| 118 | } | 108 | } |
| 119 | 109 | ||
| 120 | - #barra-brasil .list { | ||
| 121 | - top: 24px; | ||
| 122 | - background: #EEE; | ||
| 123 | - width: auto; | 110 | + #barra-brasil nav:hover #menu-icon, #barra-brasil nav:active #menu-icon { |
| 111 | + background-color: #DDD; | ||
| 124 | } | 112 | } |
| 125 | 113 | ||
| 126 | - #barra-brasil .list a:hover li { | ||
| 127 | - background: #DDD; | 114 | + #barra-brasil ul.list, #barra-brasil ul.list:active { |
| 115 | + overflow: hidden; | ||
| 116 | + height: 0px; | ||
| 117 | + transition: 0.3s; | ||
| 118 | + padding-top: 32px; | ||
| 119 | + width: auto; | ||
| 128 | } | 120 | } |
| 129 | 121 | ||
| 130 | #barra-brasil .list-item { | 122 | #barra-brasil .list-item { |
| 131 | - display: inline-block; | ||
| 132 | - height: 28px; | ||
| 133 | - padding: 0; | ||
| 134 | - border: 2px solid #dfdfdf; | 123 | + display: block; |
| 124 | + text-align: center; | ||
| 125 | + height: 30px; | ||
| 126 | + background: #EEE; | ||
| 127 | + padding: 0 15px; | ||
| 128 | + border: 1px solid #dfdfdf; | ||
| 135 | } | 129 | } |
| 136 | 130 | ||
| 137 | - #barra-brasil nav li{ | ||
| 138 | - text-align: center; | ||
| 139 | - width: 100%; | ||
| 140 | - padding: 10px 0; | ||
| 141 | - margin: 0; | 131 | + #barra-brasil .list a:hover li { |
| 132 | + background: #DDD; | ||
| 142 | } | 133 | } |
| 143 | 134 | ||
| 144 | - #barra-brasil nav:hover ul{ | ||
| 145 | - display: block; | 135 | + #barra-brasil nav:hover ul.list { |
| 136 | + height: 150px; | ||
| 137 | + transition: 0.5s; | ||
| 146 | } | 138 | } |
| 147 | 139 | ||
| 148 | div#wrapper-barra-brasil { | 140 | div#wrapper-barra-brasil { |
recipes/default/assets/imagens/menu.png
