防止 ul 菜单打印答案

【问题标题】：Prevent a ul menu from printing防止 ul 菜单打印
【发布时间】：2014-08-01 02:56:43
【问题描述】：

我正在使用 Joel Birch 的基于元素的 jQuery Superfish 菜单，它工作正常，但是当用户打印页面时，“菜单”被解释为无序列表......就像这样：

我想知道是否有一种解决方法可以避免打印此元素（菜单栏）使其不可见或使其可打印，就像在浏览器中看到的一样？

的代码是基础：

<ul class="sf-menu" id="example">
  <li>
    <a href="#">sobre nós</a>
  </li>
  <li class="current"><a href="#a">tratamentos e produtos</a>
  <ul>
    <li><a href="#aa">menu item that is quite long</a></li>
    <li class="current"><a href="#ab">menu item</a>
    ...
</ul>

感谢任何帮助或提示。谢谢。

【问题讨论】：

标签： jquery printing menu html-lists superfish

【解决方案1】：

创建隐藏菜单的 css 文件，如下所示：

.sf-menu{display:none;}

保存该文件并将其链接到您的页面

中：

<LINK REL="stylesheet" TYPE="text/css" 
 MEDIA="print" HREF="urlofyourcssfilehere.css">

这只会在打印页面时隐藏菜单。

MEDIA 属性是关键。使用它，您可以为每种媒体指定不同的 css：打印、手持等。

查看此链接：http://www.w3.org/TR/CSS2/media.html

【讨论】：

太棒了！谢谢，“我脑子里有这么多代码”以至于我忘记了这种方法......;）
简单而甜美。谢谢:)

【解决方案2】：

如果您不想为打印机创建一个完整的额外样式表，您可以在现有样式表中使用媒体查询。

@media print {
    .sf-menu: {
        display: none;
    }
}

【讨论】：