quinta-feira, 8 de janeiro de 2015

"REALLY" NICE MENUS DRUPAL CANTOS ARREDONDADOS E SOMBRA

REALLY NICE MENUS +Drupal 

Customização do Nice Menus do Drupal para colocar cantos arredondados e sombra. Você pode copiar o código abaixo e salvar em um arquivo com a extensão .CSS (Cascade Style Sheets). Depois você vai nas configurações globais do tema na área de administração do Drupal e aponta o caminho para ele no campo "CAMINHO PARA O ARQUIVO CUSTOMIZADO DE CSS DO NICE MENUS".
Ficou bem legal. Vou compartilhar o código que fiz para quem quiser usar:


Imagem ilustrativa do menu
/******************************
Global CSS for ALL menu types
******************************/

ul.nice-menu,
ul.nice-menu ul {
list-style: none;
padding: 0;
margin: 0;
border: 0px solid #ccc;
}

ul.nice-menu li {
border: 1px solid #ccc;
float: left; /* LTR */
background-color: #eee;
border-radius: 10px;
margin-bottom:7px;
-webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

ul.nice-menu a {
padding: 0.3em 5px 0.3em 5px;
}

ul.nice-menu ul {
top: 1.8em;
left: -1px; /* LTR */
border: 0;
border-top: 1px solid #ccc;
margin-right: 0; /* LTR */
}

ul.nice-menu ul li {
width: 190px;
}


/******************************
VERTICAL (left/right) menus
******************************/

/* This is the default width of all vertical menus. */
ul.nice-menu-right, ul.nice-menu-left,
ul.nice-menu-right li, ul.nice-menu-left li {
width: 190px;
}

/* VERTICAL menus where submenus pop RIGHT (default). */
ul.nice-menu-right ul {
width: 190px;
left: 190px;
top: -1px;
}

ul.nice-menu-right ul ul {
width: 190px;
left: 190px;
top: -1px;
}

ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent {
background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li li.menuparent:hover {
background: #ccc url(arrow-right.png) right center no-repeat;
}



/******************************
HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
float: left; /* LTR */
border: 0;
}

ul.nice-menu-down li {
border-top: 1px solid #ccc;
}

ul.nice-menu-down li li {
border-top: 0;
}

ul.nice-menu-down ul {
left: 0; /* LTR */
}

ul.nice-menu-down ul li {
clear: both;
}

ul.nice-menu-down li ul li ul {
left: 12.5em; /* LTR */
top: -1px;
}

ul.nice-menu-down .menuparent a {
padding-right: 15px; /* LTR */
}

ul.nice-menu-down li.menuparent {
background: #eee url(arrow-down.png) right center no-repeat; /* LTR */
}

ul.nice-menu-down li.menuparent:hover {
background: #ccc url(arrow-down.png) right center no-repeat; /* LTR */
}

ul.nice-menu-down li li.menuparent {
background: #eee url(arrow-right.png) right center no-repeat; /* LTR */
}

ul.nice-menu-down li li.menuparent:hover {
background: #ccc url(arrow-right.png) right center no-repeat; /* LTR */
}

Nenhum comentário:

Postar um comentário