Prevent a ul menu from printing

StackOverflow https://stackoverflow.com/questions/14911045

Question

I'm using the jQuery Superfish menu by Joel Birch that is based in elements and it works fine but when the user prints the page the "menu" is interpreted as a unordered list... like this:

(example image here...)

I wonder if there is a workaround to avoid this element (the menu bar) from printing making it invisible or make it printable exactly like it is seen in the browser?

the code for the is the basics:

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

Any help or tip is appreciated. Thanks.

Was it helpful?

Solution

Create css file that hides menu like this:

.sf-menu{display:none;}

Save that file and link it in your page <head> with:

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

This will hide menu only when printing page.

MEDIA attribute is the key. Using it you can specify different css for each media: print, hendheld, etc.

See this link: http://www.w3.org/TR/CSS2/media.html

OTHER TIPS

If you don't want to create a whole extra stylesheet for the printer, you can use a media query in your existing stylesheet.

@media print {
    .sf-menu: {
        display: none;
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top