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であるため、 を指定したい場合は、またはが実際に機能し、すべてがクリック可能になるようにする必要がありますheight。widthdisplay:blockdisplay:inline-blockheight/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%;テキストを垂直方向に揃えるためにも追加されます。(これは、テキストが 1 行に収まる場合にのみ機能します)

于 2013-07-11T13:18:47.457 に答える