1 / 4

Sliding Menus Example

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>

medwin
Download Presentation

Sliding Menus Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related