如何制作这样的水平 CSS3 菜单答案

【问题标题】：How to make horizontal CSS3 menu like this如何制作这样的水平 CSS3 菜单
【发布时间】：2014-09-20 22:58:58
【问题描述】：

我怎样才能制作一个类似下面网站菜单的 CSS3 菜单？

我的意思是具有精美效果的顶级菜单。请至少告诉我这些菜单的名称，以便我可以找到更多示例。

【问题讨论】：

这是一个 Flash 对象，它不是用 css 制作的。虽然实现这个效果很容易，只需尝试实现它，如果您在此处遇到任何问题，我们将为您提供帮助
这似乎是使用 Flash 完成的。使用 CSS3 可以达到类似的效果，但如何从头开始是一个太宽泛的问题。你会使用transform、伪元素、一些绝对定位等。

标签： css menu

【解决方案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>

【讨论】：

【解决方案2】：

我有一个很棒的解决方案给你。它看起来像该网站的一个，但我尝试了一些其他颜色。看看，它很棒而且很简单，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);
}

当然，它非常简单，您可以根据自己的需要进行调整。希望你喜欢！

【讨论】：

【解决方案3】：

如前所述，这是一个 Flash 对象，但您可以使用 CSS 和 jquery 旋转函数 this is my example 执行类似操作，您可以删除 display: inline; 以获得水平列表。

编辑：

水平方向：see Demo

【讨论】：