如何制作这样的横向CSS3菜单

Question

如何制作CSS3菜单，如下面网站上的菜单？

http://www.bardia-textile.com/en/

我的意思是顶级菜单，有很好的效果。请至少告诉我这些菜单的名称，我可以找到更多的例子。

Answer 1

$(function(){
    $('.sub').click(function(){
        $('.sub').removeClass('active');
        $(this).addClass('active');
    });
});

#menu{
	position:absolute;
	width:210px;
	height:auto;
	background:transparent;
	-webkit-transform: rotate(270deg);
	left:100px;
	top:0;
	overflow:hidden;
}
.sub{
	display:block;
	padding: 16px 0;
	margin-bottom: 4px;
	text-align:center;
	z-index:10;
	cursor:pointer;
}
.sub:after{
	content:'';
	position:absolute;
	background:gray;
	display:block;
	width:200px;
	height:50px;
	margin-top: -34px;
	z-index:-2;
	right:-10px;
}
.sub:before{
	content:'';
	position:absolute;
	background:red;
	display:block;
	width:210px;
	height:50px;
	margin-top: -16px;
	z-index: -1;
	right:-220px;
	-webkit-transition:right .3s;
}
.sub:hover:before{
	right:0px;
}
.active:after{
	right:0px;
	width:210px;
	background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    <div class="sub active">subs1</div>
    <div class="sub">subs2</div>
    <div class="sub">subs3</div>
    <div class="sub">subs4</div>
    <div class="sub">subs5</div>
</div>

Answer 2

就像之前说过的这是一个flash对象，你可以使用CSS和jquery旋转函数this is my example做类似的事情，你可以删除display: inline;来获得一个水平列表。

编辑：

水平：see Demo

Answer 3

我有一个很棒的解决方案。它看起来像网站的一个，但我尝试了一些其他颜色。 看一看，它很棒很简单，fiddle is here：

它看起来如何？这里...

实现：

HTML

<div id="main">    
<ul id="navigationMenu">    
    <li>
        <a class="rotate home" href="#">
            <span>home</span>
        </a>
    </li>        
    <li>
         <a class="rotate about" href="#">
            <span>About</span>
         </a>
    </li>

    <li>
        <a class="rotate services" href="#">
            <span>Services</span>
        </a>
    </li>        
    <li>
        <a class="rotate contact" href="#">
            <span>Contact</span>
        </a>
    </li>
</ul>        
</div>

CSS：

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;
    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    padding:2px;
    width:15px;
    padding:10px;
    display:inline-block;

}

#navigationMenu ul{
    list-style:none;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:5px;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    display:block;
    position:relative;
}

/* General hover styles */
#navigationMenu a:hover span{ width:20px; padding-left:15px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;   
    /*CSS outer glow with the box-shadow property
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;*/
}

/* Blue Button */
#navigationMenu .home span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */
#navigationMenu .about span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */
#navigationMenu .services span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}


/* Purple Button */
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */
#main{
    margin:80px auto;
    position:relative;
    width:240px;
}

a, a:visited,a:active {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

a img{
    border:none;
}

.rotate {
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

当然，它很简单，所以你可以根据自己的需要调整这个。 希望你喜欢！