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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Side Navigation with a ribbon type style

    I have a side navigation that I need help figuring out how I would code to have a ribbon type style. My designers went out and got a design approved without reviewing with me, now I have to figure out how to code this. I am drawing a blank. here is my current HTML:

    Code:
    <section id="block-menu-block-1" class="block block-menu-block clearfix">
    
          
      <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-2">
      <ul class="menu nav"><li class="first leaf has-children menu-mlid-440"><a href="/solutions/enterprise-solutions/profile-management">Profile Management</a></li>
    <li class="leaf has-children menu-mlid-596"><a href="/solutions/enterprise-solutions/personalized-communications">Personalized Communications</a></li>
    <li class="leaf has-children menu-mlid-597"><a href="/solutions/enterprise-solutions/tailored-delivery">Tailored Delivery</a></li>
    <li class="leaf has-children menu-mlid-598"><a href="/solutions/enterprise-solutions/business-intelligence">Business Intelligence</a></li>
    <li class="last leaf has-children menu-mlid-599"><a href="/solutions/enterprise-solutions/tools-and-tech">Tools &amp; Tech</a></li>
    </ul></div>
    
    </section>

    You can see in the attachment there are two small triangles on the top and bottom of the nav. I know how to make the nav positioned pasted the container, it is the small triangles I am not sure how to do. Also this nav is going to be fixed as you scroll down the page. Any help on how to accomplish this would be most appreciated.
    Attached Thumbnails Attached Thumbnails Side Navigation with a ribbon type style-screen-shot-2014-05-15-4.39.00-pm.jpg  

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this website:

    Pure CSS3 Ribbons Without Images

    which help me to understand how to accomplish this with CSS3, thank you!!!

    I used this CSS to make it work with border angle on top and bottom:

    .sidebar ul.menu:before, ul.menu:after
    {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    }

    .sidebar ul.menu:before{
    left: 0px;
    top: -3px;
    border-width: 2px 4px;
    border-style: solid;
    border-color: transparent #C5C5C5 #C5C5C5 transparent;
    }


    .sidebar ul.menu:after{
    left: 0px;
    top: 100%;
    border-width: 2px 4px;
    border-style: solid;
    border-color: #C5C5C5 #C5C5C5 transparent transparent;
    }


  •  

    Tags for this Thread

    Posting Permissions

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