jqueryprintingmenuhtml-listssuperfish

Prevent a ul menu from printing

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.

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