ThemeShaper Forums » Thematic

[closed]

Styling sf-menu

(3 posts)
  • Started 2 years ago by yozz84
  • Latest reply from em hr
  • This topic is not resolved
  1. yozz84
    Member

    I would like to have this menu: http://codepen.io/anon/pen/bdmFz in thematic theme menu (sf-menu)... but i cant styling this... its not working as should... could someone help me with this? how should it look like? thank you very much.

    Posted 2 years ago #
  2. yozz84
    Member

    Now i have this:

    .skip-link {
        display:none;
    	background: #6EAF8D;
      background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
      background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
      background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
      background: linear-gradient(left, white 50%, #6EAF8D 50%);
      background-size: 50px 25%;;
      padding: 2px;
      display: block;
      height: 2px;
      overflow: hidden;
      width: 936px;
      margin: 0 auto;
    }
    
    #access {
    	font-family: helvetica, arial, serif;
        font-size: 10px;
    	text-transform: uppercase;
    	text-align: center;
    	overflow: visible;
    	z-index: 100;
    
    }
    
    .menu a {
      text-decoration: none;
      color: #fff;
      display: block;
    }
    
    .menu ul {
      list-style: none;
      position: relative;
      text-align: left;
    }
    
    .menu li {
      float: left;
    }
    
    /* clear'n floats */
    .menu ul:after {
      clear: both;
    }
    
    .menu ul:before,
    .menu ul:after {
        content: " ";
        display: table;
    }
    
    /* main ul element */
    .menu {
      position: relative;
      background: #2B2B2B;
      background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
      background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
      background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
      background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
      text-align: center;
      letter-spacing: 1px;
      text-shadow: 1px 1px 1px #000;
      -webkit-box-shadow: 2px 2px 3px #888;
      -moz-box-shadow: 2px 2px 3px #888;
      box-shadow: 2px 2px 3px #888;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    
    /* sf-menu */
    ul.sf-menu li a {
      display: block;
      padding: 10px 15px;
      border-right: 1px solid #3D3D3D;
    }
    
    ul.sf-menu li:last-child a {
      border-right: none;
    }
    
    ul.sf-menu li a:hover {
    
      color: #000;
    }
    
    /* subs */
    ul.sub-menu {
      position: absolute;
      z-index: 200;
      box-shadow: 2px 2px 0 #BEBEBE;
      width: 35%;
      display:none;
    }
    
    ul.sub-menu li {
      float: none;
      margin: 0;
    }
    
    ul.sub-menu li a {
      border-bottom: 1px dotted #ccc;
      border-right: none;
      color: #000;
      padding: 10px 15px;
    }
    
    ul.sub-menu li:last-child a {
      border-bottom: none;
    }
    
    ul.sub-menu li a:hover {
      color: #000;
      background: #eeeeee;
    }
    
    /* sub-menu display*/
    ul.sf-menu li:hover ul {
      display: block;
      background: #fff;
    }
    
    /* keeps the tab background white */
    ul.sf-menu li:hover a {
      background: #fff;
      color: #666;
      text-shadow: none;
    }
    
    ul.sf-menu ul li:hover > a{
      color: #000;
      background: #f8f8f8;
    } 
    
    /* subs 2nd level */
    ul.sub-menu ul {
      position: absolute;
      z-index: 300;
      box-shadow: 2px 2px 0 #BEBEBE;
      width: 35%;
      display:block;
      float: left;
    }
    
    ul.sub-menu ul li{
      float: none;
      margin: 0;
    }
    
    ul.sub-menu ul li a {
      border-bottom: 1px dotted #ccc;
      border-right: none;
      color: #000;
      padding: 10px 15px;
    }
    
    ul.sub-menu ul li:last-child a {
      border-bottom: none;
    }
    
    ul.sub-menu ul li a:hover {
      color: #fff;
      background: #666;
    }

    Problems:
    - style second sub menu - 2nd level
    - i dont know how to put/style color decor line under menu [Done]
    - left and right side of menu dont heighlight when mouse is over like in example page

    Posted 2 years ago #
  3. Please read this and come to then new ThematicTheme Forums for support.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.