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

Loading in 2 Seconds...

play fullscreen
1 / 4

Sliding Menus Example - PowerPoint PPT Presentation


  • 290 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Sliding Menus Example' - medwin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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>

</body>

</html>

Try It

sliding menus example v1 cont d
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).

sliding menus example cont d
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

sliding menus example cont d4
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