汉堡图标不完全可点击

时间:2015-06-20 23:48:14

标签: html css hamburger-menu

大家,

我第一次使用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;
}

我们非常感谢您解决此问题的任何帮助。

谢谢!

1 个答案:

答案 0 :(得分:1)

您需要将a设置为display:block,因为默认情况下a设置为inline,您必须同时为height提供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>
session_name()