Choose from our various pricing plans. There is a package for everyone!


How to create a rotated vertical menu like this ?

View previous topic View next topic Go down

How to create a rotated vertical menu like this ?

Post by MrBean14 on Fri Jan 04, 2013 9:00 am

Hello all,

Somebody asked me to make a menu like this for his website.
Any idea on how to start doing this with CSS ?



Thanks for any help.

Greetings,

Davy
avatar
MrBean14
Member
Member

Age : 44
Posts : 2
Join date : 2013-01-04
Reputation : 0

View user profile

Back to top Go down

Re: How to create a rotated vertical menu like this ?

Post by MrBean14 on Fri Jan 04, 2013 3:36 pm

Hello all,

because I don't want to sit and wait without trying it myself, I created the following HTML and CSS code :

HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="single_fourteen.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <ul id="menu">
        <li><a href="" class="seven">Contact</a></li>
        <li><a href="" class="six">Links</a></li>
        <li><a href="" class="five">Kwaliteit</a></li>           
        <li><a href="" class="four">Waar</a></li>
        <li><a href="" class="three">Werkplaats</a></li>
        <li><a href="" class="two">Bedrijf</a></li>
        <li><a href="" class="one">Home</a></li>
    </ul>
</body>
</html>


CSS

Code:

#menu {list-style:none; padding: 0;}

#menu li {text-align: right;}

#menu li a {
                display: inline-block;
                height: 50px;
                line-height:50px;
                cursor:pointer;
                padding-right: 20px;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 13px;
                color:#fff;
                text-decoration:none;
}

a.seven {width:114px; background: #4e4e4e;}
a.six  {width:151px; background: #a24543;}
a.five  {width:170px; background: #d45451;}
a.four  {width:207px; background: #da694c;}
a.three {width:267px; background: #da8c4c;}
a.two  {width:228px; background: #da7e4c;}
a.one  {width:176px; background: #da9d4c;}

#menu li a:hover, #menu li a:active, #menu li a:focus {color:#000;}

If I look at this design, this is the result :



It looks correct (except the order of the menu and colors but this is due to testing and because the other way around it would not show correctly !

When I now add the rotate code for "#menu li a" like this :

Code:

#menu li a {
                display: inline-block;
                height: 50px;
                line-height:50px;
                cursor:pointer;
                padding-right: 20px;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 13px;
                color:#fff;
                text-decoration:none;

                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                -o-transform: rotate(-90deg);
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

When I do this, I get the following result :



At this moment, after trying a lot, I'm stuck and don't know why the result is so different when adding the rotate...

Any help is welcome.

Greetings,

Davy
avatar
MrBean14
Member
Member

Age : 44
Posts : 2
Join date : 2013-01-04
Reputation : 0

View user profile

Back to top Go down

Re: How to create a rotated vertical menu like this ?

Post by Th1nK on Fri Jan 04, 2013 9:06 pm

Hmm, I will check that with our Coders.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Re: How to create a rotated vertical menu like this ?

Post by Mati™ on Sat Jan 12, 2013 12:36 pm

Please provide your forum URL?
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: How to create a rotated vertical menu like this ?

Post by Mati™ on Wed Dec 25, 2013 11:36 am

User inactive and seems not to need help. Because of this, the support topic has been closed.


If you have other questions, please open a new topic.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: How to create a rotated vertical menu like this ?

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum