0

これは質問するには多すぎるかもしれませんが、私はここで限界に達しています。

私はこの ( http://jsfiddle.net/3whTa/ ) CSS を持っており、矢印の水平ブレッドクラム ナビゲーションを作成します。

私がしたいのは、それを垂直に変換することです。のように、矢印は互いに下を向いていますが、テキストは水平のままです (サイズを変更する必要があります)。

これはどのように可能ですか？また、このようなナビゲーションを探してみましたが、何も見つからなかったので、正しい方向のポイントも同様に役立ちます.

実際の動作と、上記のリンクされた jsfiddle のコードを確認できますが、ここにも貼り付けます。

HTML

<ul id="breadcrumbs-two">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
</ul>

CSS

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
    font-weight: bold;
    background: #99db76;
}

#breadcrumbs-two .current::after{
    border-left-color: #99db76;
}
#breadcrumbs-two .current::before{
    border-color: #99db76 #99db76 #99db76 transparent;
}
4

2 に答える 2

1

私は少し前にこのようなことをしました...しかし、複数の方法があると確信しています。これが私の最初の試みです。

Codepen デモ

HTML

<nav role='navigation'>
  <ul>
    <li><a href="#">Step 1</a></li>
    <li><a href="#">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
    <li><a href="#">Step 4</a></li>
  </ul>
</nav>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

ul {
  list-style:none;
  margin:25px;
 }

li {
  text-align:center;
  margin-bottom:25px;
  position:relative;
  background:darkblue;
  width:50px;
}

li:hover {
  background:green;
}

a {
  text-decoration:none;
  font-weight:bold;
  display:block;
  color:white;
  height:50px;

  line-height:75px;
  position:relative;
  font-size:0.75em;

}

li:before,
li:after {
  position:absolute;
  content:"";
  left:0;
  border:25px solid transparent;
  height:0;
  width:0;
  z-index: 25;
}

li:before {
  top:0;
  border-top-color:white;
}

li:after {
  top:100%;
  border-top-color:darkblue;
}

li:hover:after {
    border-top-color:green;
}
于 2013-10-30T13:39:33.300 に答える
1

またはこのCSS：

ul
{
padding-left:0;
width:100px;
}

ul li
{
display:block;
height:30px;
margin-bottom:8px;
position:relative;
background:gray;
}

ul li:before
{
content:'';
top:-1px;
left:10px;
border:1px solid blue;
border-width:4px 40px 20px 40px;
border-color: white transparent transparent transparent;
position:absolute;
}

ul li:first-child:before
{
border:none;
}

ul li:after
{
content:'';
bottom:-26px;
left:10px;
border:1px solid blue;
border-width:6px 40px 20px 40px;
border-color: red transparent transparent transparent;
position:absolute;
}

ul li:last-child:after
{
border:none;
}

直角に満たない非常に単純な矢印の場合。しかし、IMHOは見栄えがよくありません。直角の小さな矢印を使用して、ブロックの中央に配置することをお勧めします。特に、テキストとして複数の単語が必要な場合。

于 2013-10-31T06:26:56.433 に答える