0

みんな、

初めて box-shadow を使用してバーガー アイコンを作成しましたが、何らかの理由で、トップ バーのみがハイパーリンクhttp://jsfiddle.net/vq5r0r8jになっています。

マークアップ:<a href="#menu" class="box-shadow-menu"></a>

CSS:

.box-shadow-menu {
    position: relative;
}

.box-shadow-menu:before {
    content: "";
    position: absolute;
    top: 10px;
    width: 35px;
    height: 4px;
        background: white;
    box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}

この問題を解決するための助けをいただければ幸いです。

ありがとう！

4

1 に答える 1

1

デフォルトでは が設定されており、それも指定する必要があるため、 atoを設定する必要があります（親と同じ）display:blockainlineheight

スニペット:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.body {
    background-color: #fff;
}
.container {
    width: 100%;
}
.header {
    width: 100%;
    height: 45px;
    background-color: #4dc1df;
}
.navicon {
    text-align: center;
}
.box-shadow-menu {
    position: relative;
    display:block; /* NEW */
    height:45px; /* NEW */
}
.box-shadow-menu:before {
    content:"";
    position: absolute;
    top: 10px;
    width: 35px;
    height: 4px;
    background: white;
    box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}
.header-text {
    width: 950px;
    font-family:;
    font-size: 38px;
    line-height: 46px;
    color: #c44628;
    margin: 0 auto;
    padding: 20px 0;
}
<div class="container">
  <div class="header">
    <div class="navicon">
      <a href="#menu" class="box-shadow-menu"></a>
    </div>
  </div>
  <div class="content">
    <div class="header-text"></div>
  </div>

于 2015-06-21T01:22:41.810 に答える