Photoshop Question posted in
The official user guide can be found here.

CSS slanted menu – Photoshop

While searching for Jquery/CSS menus I came across this site:

http://www.freshdesignweb.com/css-drop-down-navigation-menu.html

If you look at the first picture there is a menu that is slanted, like it’s hanging off a hinge, that looks pretty darn awesome, so I clicked that link and went to the site but nowhere did I find that slanted menu, not on the site, not in the demo 🙁

While I think it’s pretty irritating someone would photoshop that, I was wondering if “Is it actually possible to make that kind of slanted menu using CSS?”

Tags:

2

Answers


  1. 0

    You could always try to use CSS transform. Check out the following JSFiddle I created.

    HTML

    <div class="slanted">
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

    CSS

    .slanted {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    margin-top: 40px;
}
    Login or Signup to reply.
  2. 0

    Certainly possible although I think it would be poor UX

    EDIT – You can even have submenus rotated back – JSfiddle

    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    margin: 25px 0 0  25px;
    padding: 0;
    width:250px;
    border:1px solid grey;
    list-style:none;
        
    transform:rotate(-35deg);
    transform-origin:top  right;
}

li {
    margin-bottom: 5px;
    padding:0.25em
}
    <nav>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Filve</li>
    </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search