Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: CSS menu

  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS menu

    Hello, a CSS menu I'm using is here: http://cssmenumaker.com/builder/825908

    I'd appreciate help with how I can make the main menu bar ("home", "products", "about", "contact") different to the sub menus, i.e. I want the main menu to have size 18px font, different background colour, etc.

    Thanks

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Please Change css

    Code:
    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);
    /* 2f4b87 */
    /* 2f4b87 */
    /* #1f325d */
    /* Menu CSS */#cssmenu {
      width: auto;
    }
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a {
      padding: 0;
      margin: 0;
      line-height: 1;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      -webkit-transition: all ease .3s;
      -o-transition: all ease .3s;
      -moz-transition: all ease .3s;
      -ms-transition: all ease .3s;
      transition: all ease .3s;
    }
    #cssmenu:before,
    #cssmenu:after,
    #cssmenu > ul:before,
    #cssmenu > ul:after {
      content: '';
      display: table;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
      clear: both;
    }
    #cssmenu a {
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }
    #cssmenu ul {
      background: #3b5998;
      border-radius: 3px;
      border: 1px solid #2b4479;
      border: 1px solid #2d4373;
      -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }
    #cssmenu ul > li {
      float: left;
      list-style: none;
    }
    #cssmenu ul > li > a {
      display: block;
      text-decoration: none;
      padding: 15px 44px;
      position: relative;
    }
    #cssmenu ul > li > a:hover {
      background: #2d4373;
      -webkit-box-shadow: inset 0 0 1px #1e2e4f;
      -o-box-shadow: inset 0 0 1px #1e2e4f;
      -moz-box-shadow: inset 0 0 1px #1e2e4f;
      -ms-box-shadow: inset 0 0 1px #1e2e4f;
      box-shadow: inset 0 0 1px #1e2e4f;
      -webkit-transition: all ease .3s;
      -o-transition: all ease .3s;
      -moz-transition: all ease .3s;
      -ms-transition: all ease .3s;
      transition: all ease .3s;
    }
    #cssmenu ul > li > a:hover:before {
      content: '';
      z-index: 2;
      position: absolute;
      border: 1px solid white;
      border-top: 0;
      border-bottom: 0;
      border-right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: -1px;
      opacity: .2;
    }
    #cssmenu ul > li > a:hover:after {
      content: '';
      z-index: 2;
      position: absolute;
      border: 1px solid white;
      border-top: 0;
      border-bottom: 0;
      border-left: 0;
      width: 100%;
      height: 100%;
      top: 0;
      right: -1px;
      opacity: .2;
    }
    #cssmenu > ul > li > ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
    }
    #cssmenu > ul > li:hover > ul {
      opacity: 1;
      visibility: visible;
      position: absolute;
      border-radius: 0 0 3px 3px;
      -webkit-box-shadow: none;
      -o-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      box-shadow: none;
    }
    #cssmenu > ul > li > ul {
      width: 200px;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li {
      float: none;
      position: relative;
    }
    #cssmenu > ul > li > ul > li > ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li:hover > ul {
      opacity: 1;
      visibility: visible;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li > ul {
      left: 200px;
      top: 1px;
      width: 200px;
    }
    #cssmenu > ul > li > ul > li > ul > li {
      float: none;
    }
    Last edited by VIPStephan; 09-07-2013 at 11:56 PM. Reason: added code BB tags

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Post the html and the css you got from this site so we can work with it.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thanks, see code below.

    HTML:
    Code:
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Products</span></a>
          <ul>
             <li class='has-sub'><a href='#'><span>Product 1</span></a>
                <ul>
                   <li><a href='#'><span>Sub Item</span></a></li>
                   <li class='last'><a href='#'><span>Sub Item</span></a></li>
                </ul>
             </li>
             <li class='has-sub'><a href='#'><span>Product 2</span></a>
                <ul>
                   <li><a href='#'><span>Sub Item</span></a></li>
                   <li class='last'><a href='#'><span>Sub Item</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>About</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
    CSS:

    Code:
    @import url(http://fonts.googleapis.com/css?fami...Sans+Pro:500);
    #cssmenu {
      width: auto;
    }
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a {
      padding: 0;
      margin: 0;
      line-height: 1;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      -webkit-transition: all ease .3s;
      -o-transition: all ease .3s;
      -moz-transition: all ease .3s;
      -ms-transition: all ease .3s;
      transition: all ease .3s;
    }
    #cssmenu:before,
    #cssmenu:after,
    #cssmenu > ul:before,
    #cssmenu > ul:after {
      content: '';
      display: table;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
      clear: both;
    }
    #cssmenu a {
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }
    #cssmenu ul {
      background: #3b5998;
      border-radius: 3px;
      border: 1px solid #2b4479;
      border: 1px solid #2d4373;
      -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
      box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }
    #cssmenu ul > li {
      float: left;
      list-style: none;
    }
    #cssmenu ul > li > a {
      display: block;
      text-decoration: none;
      padding: 15px 44px;
      position: relative;
    }
    #cssmenu ul > li > a:hover {
      background: #2d4373;
      -webkit-box-shadow: inset 0 0 1px #1e2e4f;
      -o-box-shadow: inset 0 0 1px #1e2e4f;
      -moz-box-shadow: inset 0 0 1px #1e2e4f;
      -ms-box-shadow: inset 0 0 1px #1e2e4f;
      box-shadow: inset 0 0 1px #1e2e4f;
      -webkit-transition: all ease .3s;
      -o-transition: all ease .3s;
      -moz-transition: all ease .3s;
      -ms-transition: all ease .3s;
      transition: all ease .3s;
    }
    #cssmenu ul > li > a:hover:before {
      content: '';
      z-index: 2;
      position: absolute;
      border: 1px solid white;
      border-top: 0;
      border-bottom: 0;
      border-right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: -1px;
      opacity: .2;
    }
    #cssmenu ul > li > a:hover:after {
      content: '';
      z-index: 2;
      position: absolute;
      border: 1px solid white;
      border-top: 0;
      border-bottom: 0;
      border-left: 0;
      width: 100%;
      height: 100%;
      top: 0;
      right: -1px;
      opacity: .2;
    }
    #cssmenu > ul > li > ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
    }
    #cssmenu > ul > li:hover > ul {
      opacity: 1;
      visibility: visible;
      position: absolute;
      border-radius: 0 0 3px 3px;
      -webkit-box-shadow: none;
      -o-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      box-shadow: none;
    }
    #cssmenu > ul > li > ul {
      width: 200px;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li {
      float: none;
      position: relative;
    }
    #cssmenu > ul > li > ul > li > ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li:hover > ul {
      opacity: 1;
      visibility: visible;
      position: absolute;
    }
    #cssmenu > ul > li > ul > li > ul {
      left: 200px;
      top: 1px;
      width: 200px;
    }
    #cssmenu > ul > li > ul > li > ul > li {
      float: none;
    }
    Last edited by VIPStephan; 09-07-2013 at 11:55 PM. Reason: added code BB tags

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,801
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    Note: Post #2 was stuck in the moderation queue and therefore hidden, and I’ve approved it now.

    ma701ss: If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    V2Media (09-12-2013)

  • #6
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks mate, could you help me with this one by any chance?

  • #7
    New Coder
    Join Date
    Aug 2013
    Location
    New York City
    Posts
    14
    Thanks
    18
    Thanked 1 Time in 1 Post
    Have you see that cssmenumaker are offering guidance for installation of this extension. It is easy job. You can just follow the instructions and You can handle it easily..

    If you will go to Dreamweaver Extension, Its paid and it is better that you will hire any expert who will help you to fix this if you can't understand the Guidance. When you will hire the expert, discuss with him that He will teach you how to do this. So then Next time You will handle it your self

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but I don't think they advise how to change the main menu only.

  • #9
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah that link I gave no longer works. One of the other menus does appear to allow customisation of the main menu. The CSS is completely different.

  • #10
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Note: Post #2 was stuck in the moderation queue and therefore hidden, and I’ve approved it now.

    ma701ss: If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
    Thank's VIPStephan has prompted


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •