Ignore:
Timestamp:
Dec 16, 2018, 4:56:03 PM (2 months ago)
Author:
root
Message:

EscalV4 : proposition d'un 2e menu horizontal style "méga menu" full CSS

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/escal/trunk/styles/menu.css

    r112788 r112840  
     1/* ==================    Menu horizontal  H2 ==================*/
     2
     3/* Reset */
     4.nav,
     5.nav a,
     6.nav ul,
     7.nav li,
     8.nav div,
     9.nav form,
     10.nav input {
     11        margin: 0;
     12        padding: 0;
     13        border: none;
     14        outline: none;
     15}
     16.nav a {
     17        text-decoration: none;
     18}
     19.nav li {
     20        list-style: none;
     21}
     22/* Menu Container */
     23.nav {
     24        display: inline-block;
     25        position: relative;
     26        cursor: default;
     27        z-index: 500;
     28        margin-bottom: -3px;
     29}
     30
     31/* Menu List */
     32.nav > li {
     33        display: block;
     34        float: left;
     35}
     36/* Menu Links */
     37.nav > li > a{
     38        position: relative;
     39        display: block;
     40        z-index: 510;
     41        height: 54px;
     42        padding: 0 20px;
     43        line-height: 54px;
     44
     45        font-weight: bold;
     46        font-size: 13px;
     47        color: #fcfcfc;
     48        text-shadow: 0 0 1px rgba(0,0,0,.35);
     49
     50        background: transparent;
     51
     52    -webkit-transition: all .3s ease;
     53    -moz-transition: all .3s ease;
     54    -o-transition: all .3s ease;
     55    -ms-transition: all .3s ease;
     56        transition: all .3s ease;
     57}
     58.nav > li:hover > a {
     59        border-radius: 5px 5px 0 0;
     60}
     61
     62.nav > li:first-child > a {
     63    border-radius: 3px 0 0 3px;
     64    border-left: none;
     65}
     66
     67
     68/* Menu Dropdown */
     69 .nav > li:hover > a, .nav > li > div{
     70        background-color: white;
     71 }
     72 .nav .nav-column li a:hover {
     73        color: #666666;
     74 }
     75 .nav > li:hover > a {
     76        color: #372f2b;
     77 }
     78 .nav > li.on > a {
     79        background: #fff;
     80        color: #372f2b;
     81        border-radius: 5px 5px 0 0;
     82 }
     83.nav > li > div {
     84    position: absolute;
     85    display: block;
     86    width: 100%;
     87    top: 52px;
     88    left: 0;
     89
     90    opacity: 0;
     91    visibility: hidden;
     92    overflow: hidden;
     93
     94    border-radius: 0 0 5px 5px;
     95    border-width: 2px;
     96    border-style: solid;
     97
     98    -webkit-transition: all .3s ease .15s;
     99    -moz-transition: all .3s ease .15s;
     100    -o-transition: all .3s ease .15s;
     101    -ms-transition: all .3s ease .15s;
     102    transition: all .3s ease .15s;
     103}
     104.nav > li:hover > div {
     105    opacity: 1;
     106    visibility: visible;
     107    overflow: visible;
     108}
     109/* Menu Content Styles */
     110.nav .nav-column li {
     111    float: left;
     112    width: 20%;
     113    padding: 1%;
     114    text-align: left;
     115}
     116.nav .nav-column ul ul li{
     117    float: none;
     118    width: 100%;
     119    margin: 0 0 0 10px;
     120    text-align: left;
     121}
     122.nav .nav-column h3 {
     123    margin: 20px 0 10px 0;
     124    line-height: 18px;
     125
     126    font-weight: bold;
     127    font-size: 15px;
     128    color: #372f2b;
     129    text-transform: uppercase;
     130    text-align: center;
     131}
     132.nav .nav-column ul ul h3 {
     133    margin: 0 0 0 10px;
     134    line-height: 26px;
     135    font-size: 13px;
     136    text-align: left;
     137}
     138.nav .nav-column li a {
     139    display: block;
     140    line-height: 26px;
     141    font-weight: bold;
     142    font-size: 13px;
     143    color: #888888;
     144}
     145
     146.nav .nav-column ul ul .rubrique a {
     147    font-size: 13px;
     148    font-style: normal;
     149    text-transform: uppercase;
     150    color: #372f2b;
     151}
     152.nav .nav-column ul ul ul .rubrique a {
     153    font-size: 11px;
     154    font-style: normal;
     155    text-transform: uppercase;
     156    color: #372f2b;
     157}
     158.nav .nav-column .article a {
     159    font-style: italic !important;
     160    font-size: 11px !important;
     161    text-transform: none !important;
     162    color: #888888 !important;
     163}
     164
     165
    1166/* ==================    Menu horizontal  ==================*/
    2167
Note: See TracChangeset for help on using the changeset viewer.