2013-02-16 85 views
0

我使用Joel Birch基於元素的jQuery Superfish菜單,它工作正常,但當用戶打印頁面時,「菜單」被解釋爲無序列表...像這樣的:防止打印ul菜單

(example image here...)

我不知道是否有一種變通方法,以避免打印使其不可見或使其打印完全像它在瀏覽器中看到這個元素(菜單欄)?

的代碼是最基礎的:

<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> 

任何幫助或尖端被理解。 謝謝。

回答

2

創建隱藏菜單這樣的css文件:

.sf-menu{display:none;} 

保存該文件,並在頁面<頭>與鏈接它:

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

打印頁面,只有當這將隱藏菜單。

MEDIA屬性是關鍵。使用它可以指定每個媒體不同的CSS:打印,hendheld等

請參閱此鏈接:http://www.w3.org/TR/CSS2/media.html

+0

太棒了!謝謝,「我的腦海裏有這麼多的代碼」,我忘記了這一點......) – 2013-02-16 14:08:54

+0

簡單而甜美。謝謝 :) – 2014-04-23 21:56:06

0

如果您不想爲打印機創建一個額外的整體樣式,你可以使用媒體在您現有的樣式表中查詢。

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