sliding menus example l.
Skip this Video
Loading SlideShow in 5 Seconds..
Sliding Menus Example PowerPoint Presentation
Download Presentation
Sliding Menus Example

Loading in 2 Seconds...

  share
play fullscreen
1 / 4
Download Presentation

Sliding Menus Example - PowerPoint PPT Presentation

medwin
291 Views
Download Presentation

Sliding Menus Example

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Sliding Menus Example <html> <head> <title>Dog Breeds</title> </head> <body> <h1>Popular Dog Breeds</h1> <h3>Sporting Dogs</h3> <p>Cocker Spaniel<br> Golden Retriever<br> Irish Setter<br> English Springer Spaniel</p> <h3>Hounds</h3> <p>Beagle<br> Bassett Hound<br> Dachshund</p> </body> </html> Try It

  2. Sliding Menus Example v1 (cont’d) <html> <head> <title>Dog Breeds</title> </head> <body bgcolor="#FFFFFF"> <h1>Popular Dog Breeds</h1> <h3> <a href="page1.html" onclick="return toggleMenu('menu1')">Sporting Dogs</a> </h3> <span class="menu" id="menu1"> <p>Cocker Spaniel<br> Golden Retriever<br> Irish Setter<br> English Springer Spaniel</p> </span> <h3> <a href="page2.html" onclick="return toggleMenu('menu2')">Hounds</a> </h3> <span class="menu" id="menu2"> <p>Beagle<br> Bassett Hound<br> Dachshund</p> </span> </body> </html> The <span> tags group sequential elements into a single new HTML element. This element has two attributes here: class (which defines a style) and id (which defines a unique identifier for the element).

  3. Sliding Menus Example (cont’d) <html> <head> <title>Dog Breeds</title> <style type="text/css"> .menu {display:none; margin-left:20px} </style> </head> <body> … <span class="menu" id="menu1"> <p>Cocker Spaniel<br> Golden Retriever<br> Irish Setter<br> English Springer Spaniel</p> </span> … </body> </html> Defines the style named menu. It sets two attributes, display and margin-left, for any element employing this style. [These attributes can be overridden.] Try It

  4. Sliding Menus Example (cont’d) <html> <head> <script type="text/javascript" language="Javascript"> function toggleMenu(currMenu) { theMenuStyle = document.getElementById(currMenu).style if (theMenuStyle.display == "block") { theMenuStyle.display = "none" } else { theMenuStyle.display = "block" } } </script> <style type="text/css"> .menuStyle {display:none; margin-left:20px} </style> </head> <body> … <a href="page1.html" onclick="toggleMenu('menu1'); return false">Sporting Dogs</a> </h3> <span class=“menuStyle"id="menu1"> <p>Cocker Spaniel<br> … Try It