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 | 8 | div, a, ul, li { |
| 9 | 9 | margin: 0; |
| 10 | 10 | padding: 0; |
| 11 | - border: 0; | |
| 12 | 11 | font-size: 100%; |
| 13 | 12 | font-family: inherit; |
| 14 | 13 | vertical-align: baseline; |
| ... | ... | @@ -96,53 +95,46 @@ div#wrapper-barra-brasil { |
| 96 | 95 | #menu-icon { |
| 97 | 96 | display: hidden; |
| 98 | 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 | 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 | 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 | 140 | div#wrapper-barra-brasil { | ... | ... |
recipes/default/assets/imagens/menu.png
