2

私はこのナビゲーションバーを修正しようとしている私の知恵の終わりにいます

ここにクリッピングhttp://i.stack.imgur.com/eDFQK.pngここに記入http://i.stack.imgur.com/0aHv2.png

これらの写真から、私が変形を使用してひし形（または政治的に正しい平行四辺形）メニューを作成していることがわかります。私はそれをするためにulとliを利用します。

接点の端をクリップしたいのですが、オーバーフローを使ってみましたが、うまくいかないようです。メニューバーの最後のメニュー項目をクリップする柔軟性はありますか？または、ない場合は、連絡先アイテムメニューと連携する別のフィラーを作成することが可能かどうかを誰かに教えてもらえますか？

説明では、連絡先メニューにカーソルを合わせると、フィラーもホバー状態になります。フィラーはブラウザのサイズに適応する必要があります。

これが私のHTMLです

<div class="outerwrap">    
     <div class="innerwrap">
         <div class="container">
             <div class="sixteen columns"> 
                 <div class="header">
                     <img class="scale-with-grid" id="logo" src="images/Logo-161x114.png" alt="Creative VistaIdea">
                     <div id="navbar">
                         <ul id="nav" >
                             <li class="rhombus"><a class="Home"     href="#"><span><p>Home</p></span></a></li>
                             <li class="rhombus"><a class="About"    href="#"><span><p>About</p></span></a>
                                   <ul>
                                         <li><a class="History"  href="#"><span><p>History</p></span></a></li>
                                         <li><a class="Board"    href="#"><span><p>Board</p></span></a></li>
                                         <li><a class="Vision"   href="#"><span><p>Vision &amp; Mission</p></span></a></li>
                                     </ul>
                             </li>
                             <li class="rhombus"><a class="Benchmark"    href="#"><span><p>Benchmark &amp; Market</p></span></a></li>
                             <li class="rhombus"><a class="Service"      href="#"><span><p>Service</p></span></a></li>
                             <li class="rhombus"><a class="Work"         href="#"><span><p>Work</p></span></a></li>
                             <li class="rhombus"><a class="Client"       href="contact.html"><span><p>Client</p></span></a></li>
                             <li class="rhombus"><a class="Contact"      href="index.html"><span><p>Contact</p></span></a></li>
                         </ul>
                     </div>
                 </div>
              </div>
           </div>
       </div>
</div>

これが私のCSSです：

#nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;}

     #nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background: #1a1a1a; /* Old browsers */
                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                        background: -moz-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); /* FF3.6+ */
                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
                                        background: -webkit-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
                                        background: -o-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Opera 11.10+ */
                                        background: -ms-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* IE10+ */
                                        background: linear-gradient(to bottom, #1a1a1a 0%,#4d4d4d 100%); /* W3C */
                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-8 */}

     #nav a:hover                        {background: #2e3191; /* Old browsers */
                                         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzE5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjc1YmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                         background: -moz-linear-gradient(top, #2e3191 0%, #1b75bb 100%); /* FF3.6+ */
                                         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e3191), color-stop(100%,#1b75bb)); /* Chrome,Safari4+ */
                                         background: -webkit-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Chrome10+,Safari5.1+ */
                                         background: -o-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Opera 11.10+ */
                                         background: -ms-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* IE10+ */
                                         background: linear-gradient(to bottom, #2e3191 0%,#1b75bb 100%); /* W3C */
                                         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3191', endColorstr='#1b75bb',GradientType=0 ); /* IE6-8 */}

     #nav li ul {position:relative; display:none;}

     #nav li ul li a:link, #nav li ul li a:active, #nav li ul li a:visited    {height:31px;
                                                        background: #859dc4; /* Old browsers */
                                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1OWRjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ODkzYmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                                        background: -moz-linear-gradient(top, #859dc4 0%, #8893be 100%); /* FF3.6+ */
                                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#859dc4), color-stop(100%,#8893be)); /* Chrome,Safari4+ */
                                                        background: -webkit-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Chrome10+,Safari5.1+ */
                                                        background: -o-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Opera 11.10+ */
                                                        background: -ms-linear-gradient(top, #859dc4 0%,#8893be 100%); /* IE10+ */
                                                        background: linear-gradient(to bottom, #859dc4 0%,#8893be 100%); /* W3C */
                                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#859dc4', endColorstr='#8893be',GradientType=0 ); /* IE6-8 */ ;}

     #nav li ul li a:hover                                            {background: #b3b1b1; /* Old browsers */
                                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjFiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4MTgyODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                                        background: -moz-linear-gradient(top, #b3b1b1 0%, #818282 100%); /* FF3.6+ */
                                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3b1b1), color-stop(100%,#818282)); /* Chrome,Safari4+ */
                                                        background: -webkit-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Chrome10+,Safari5.1+ */
                                                        background: -o-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Opera 11.10+ */
                                                        background: -ms-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* IE10+ */
                                                        background: linear-gradient(to bottom, #b3b1b1 0%,#818282 100%); /* W3C */
                                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b1b1', endColorstr='#818282',GradientType=0 ); /* IE6-8 */}

.History{width:13%;float:left;}
.Board{width:13%;float:left;}
.Vision{width:13%;float:left;}

     li.rhombus
     {
    position: relative;
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    width:100%;
     }

     a.Home         {width:10.1553784860558%;float:left;}
     a.About        {width:8.9601593625498%;float:left;}
    a.Benchmark {width:20.1155378486056%;float:left;}
    a.Service   {width:9.5577689243028%;float:left;}
    a.Work      {width:10.5498007968127%;float:left;}
     a.Client   {width:10.5498007968127%;float:left;}
     a.Contact  {width:11.9482071713147%;float:left;}

     li.rhombus span 
     {
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    display:block;
     }

     #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
     #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
4

2 に答える 2

1

最後の項目に要素を追加することに反対していない場合、つまりメニューが動的に作成されておらず、最後の要素が何であるかを追跡する必要がない場合は、最後にdivを追加してみてくださいバックフィラーとして機能できるLI。

<li class="rhombus"><div style='position:relative;z-index:10;'><a class="Contact" href="index.html"><span><p>Contact</p></span></a></div><div class='clipper'></div></li>

CSS：

    .clipper{
        width:50%;
        height:100%;
        background:black;
        position:absolute;
        right: -17.5%;
        transform: skew(35deg);
        -webkit-transform: skew(-35deg);        
        -moz-transform: skew(-35deg);
        -ms-transform: skew(-35deg);
        -o-transform: skew(-35deg);
        z-index: 1;
    }

これが例です。

于 2013-01-14T20:25:54.413 に答える
0

Pow-lanの回答に取り組んで、htmlを変更せずにそれを行うために、CSSに追加しました。

#nav > .rhombus:last-child:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: red;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

#nav > .rhombus:last-child:hover:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: green;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

ホバー状態のコードのほとんどは冗長であり、色を変更するだけで機能するはずです。なぜ正しい座標がこの値である必要があるのか​​わからないことを認めなければなりません。それはスキューから来ているのだろうかと思います。試行錯誤で設定しました

結果は：

http://jsfiddle.net/vals/MV6CN/
于 2013-01-15T22:04:11.517 に答える