0

我根据 Windows 8 概念制作了这个导航菜单。我现在希望整个图块成为超链接的一部分。因此，如果我们单击磁贴上的任何位置，它会将我们带到链接的站点。代码在 JS Fiddle 上：http: //jsfiddle.net/2Lkdy/

 // html 
       <div class="div1">
           <ul>
            <li><a href="ITEM1.html">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <a href="#"><li>Item 3</a></li>
             <a href="#"><li>Item 4</a></li>
           </ul>
       </div>

// css 
.div1 {list-style: none;
    margin-left:14%;
    margin-right:auto;
    margin-bottom:auto;
    margin-top:auto;
    text-decoration:none;
    display:block;}
.div1 li {
    display: inline;
    float: left;
    padding: 3em;
    color: #000;
    font-family: "Open Sans","Century Gothic","Trebuchet MS","Ubuntu","sans-serif";
    font-weight: 400;
    font-size: 18pt;
    -webkit-transition: all 0.5s;
    width:85px;
}
.div1 ul li:hover{
    padding: 80px;
    margin-top: -20px;
    -webkit-transition: all 0.5s;
}
.div1 ul li a {
    color: #000;
    text-decoration: none;

}

.div1:hover ul:hover li{
    opacity:0.5;
}
.div1:hover ul:hover li:hover{
    opacity:10;
}
.div1 ul li:nth-of-type(1){
    background:#CB4F1E;
}
.div1 ul li:nth-of-type(2){
    background:#D3711B; 
}
.div1 ul li:nth-of-type(3){
    background:#94B339; 
}
.div1 ul li:nth-of-type(4){
     background:#68B43F;
}
@media screen and (max-width: 480px) {
    .div1 {
        position: relative ;
        min-height: 70px;
    }   
    .div1 ul {
        width: 180px;
        padding: 5px;
        position: absolute;
        top: 0;
        overflow: hidden;
        left: 0;
        border: solid 1px #aaa;
        background: url("threelines_48_3.png") no-repeat 10px 11px;
        background-position:left 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
        opacity:1;
        min-height: 40px;
    }
    .div1 li {
        display: none; /* hide all <li> items */
        margin: 0;
        opacity: 1;
    }
    .div1 ul:hover {
        box-shadow: 0 1px 2px rgba(0,0,0,0);
        background:transparent;
        border: 0px solid #000;
    }
    .div1 ul:hover li {
        display: block;
        margin: 0 0 5px;
        opacity: 1;
        height: 20px;
        padding:4px;
        text-align: center;
    }
    .div1 ul li{
        width:180px;
        padding:4px;
        margin-top:2px;
        opacity:1;
        height:20px;
    }
    .div1 ul li:hover{
        opacity: 1;
        height:20px;
        padding:4px;
        text-align: center;
    }
.div1 ul li:nth-of-type(1){
    background:#CB4F1E;
}
.div1 ul li:nth-of-type(2){
    background:#D3711B; 
}
.div1 ul li:nth-of-type(3){
    background:#94B339; 
}
.div1 ul li:nth-of-type(4){
     background:#68B43F;
}
}

格式化。

4

2 回答 2

1

尝试这样的事情：

JSFiddle 演示

HTML：

<ul>
    <li class="item1"><a href="#">1</a></li>
    <li class="item2"><a href="#">2</a></li>
    <li class="item3"><a href="#">3</a></li>
    <li class="item4"><a href="#">4</a></li>
</ul>

CSS：

* {margin:0; padding:0; }
ul { width:400px; float:left }
li { float:left; list-style:none;}
li a { display:block;  width:200px; height:200px; }

li.item1 a { background:red; }
li.item2 a { background:orange; }
li.item3 a { background:lime; }
li.item4 a { background:blue; }

li a:hover { opacity:0.5;}

说明：

默认情况下，a元素是inline，所以如果你想给它 a height，width那么你需要让它或者display:block为了display:inline-block实际height/width工作并使整个东西可点击。

于 2013-07-11T13:20:16.867 回答
0

您的 HTML 无效。我在这里更正了：http: //jsfiddle.net/M9nrL/2/

<div class="div1">
    <ul>
        <li><a href="ITEM1.html">Item 1</a>
        </li>
        <li><a href="#">Item 2</a>
        </li>
        <li><a href="#">Item 3</a>
        </li>
        <li><a href="#">Item 4</a>
        </li>
    </ul>
</div>

并添加了这个 CSS：

.div1 ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    line-height: 100%;
}

该a元素默认为inline，这意味着它的高度和宽度是其中文本的长度和高度。但是通过将 display 设置为block，elements( a) 的高度和宽度被设置为它的 parent( li)。

还添加line-height : 100%;以垂直对齐您的文本。（这仅在您的文本适合单行时才有效）

于 2013-07-11T13:18:47.457 回答