Scribd
Upload
35 views

Css Practical No 14

Uploaded by

sarthi1505
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

Css Practical No 14

Uploaded by

sarthi1505
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Practical No. 14. Develop a webpage for implementing Menus.

Minimum Theoretical background


A. Menu
• Menus are an important element to provide navigations in WebPages
• It provides quick link for browsing the desired web pages
• Different types of Menus can be implemented depending on the requirements

.
B. Types of Menus
• It is possible to open a new window from a JavaScript by simply clicking a button.

1.Pull Down Menu: Uses a combination of div elements and CSS for hover effects to show
the dropdown options
.
2.Floating Menu: Utilizes position: fixed to keep the menu in a fixed position on the screen,
allowing easy access as the user scrolls.

3. Chain Select Menu: A chain of pull-down menus can be created in which the option
selected from the first pull-down menu determines the options that are available in
the second pull-down menu. Likewise, the second pull-down menu selection
determines options that are shown in the third pull-down menu.

4.Tab Menu: Uses buttons to switch between content sections, with JavaScript to control
visibility.

5.Popup Menu: Displays a menu on button click, with functionality to close the menu when
clicking outside of it.

6. Highlighted Menu: A highlighted menu, causes two kinds of highlights to appear


around an item on the menu. When the visitor moves the cursor over a menu item,
the browser displays a box around the item with a shadow at the bottom of the box.
If the visitor selects the item, the highlight shadow appears at the top of the box
rather than at the bottom of the box.

7. Folding Tree Menu: The folding tree menu should look familiar, because it is a
classic menu used in desktop applications to help you to navigate file folders. The
tree consists of one or more closed folders, each of which appears alongside the
folder's name. The tree expands when the visitor clicks a closed folder, showing one
or more menu options that are associated with the folder.

8. Context Menu :The context menu pops up on the web page when the visitor clicks
the right mouse button . The location of the context menu on the screen is
determined by the position of the mouse cursor. The mouse cursor sets the position
of the upper-left corner of the context menu. Each menu item is automatically
highlighted as the visitor scrolls through the menu by moving the mouse cursor. The
visitor clicks the name of the item to select that menu option. The context menu is
hidden from the screen by clicking the mouse cursor away from the menu. You can
link each of these options to another web page or to a bookmark within the web
page that contains the tree menu. The tree collapses when the visitor clicks an open
Folder.

9. Scrollable Menu: If you are tight on space and have many menu items to present to
visitors to your web site, the scrollable menu is the solution to your problem. The
scrollable menu displays a limited number of menu item across the web page.
Although only a few items are shown, you can use as many menu items as your
application needs. Two arrowheads appear at both ends of the visible list of menu
items. Visitors can simply move the mouse cursor over one of the arrowheads and
the browser automatically scrolls the menu in the direction of the arrowhead The
visitor can then click the appropriate menu item once it scrolls into view.
10. Side Bar Menu: The side bar menu displays a menu on the side of the web page.
Options on this menu can be linked to other web pages or to other menu options.
11. Slide-In Menu/Sliding Menu: The slide-in menu appears as a vertical block that
floats on the left side of the web page. It seems to come alive when the visitor
moves the mouse cursor over the block.

Questions:-

1. Explain any 4 methods types of Menu.


1. Pull down Menu : Also called a drop-down menu, a menu of commands or options
that appears when you select an item with a mouse
2.Floating Menu: The menu which is fixed while scrolling the webpage is called as
floating menu. It can be created by setting style position of menu as fixed.
3. Tab Menu: Tab menus display a one- or two-word description of the menu option
within a tab. A more complete description is displayed below the tab bar as the
visitor moves the mouse cursor over the tab
4.Popup Menu: A popup menu displays several top-level menu items. A popup menu
appears as the visitor moves the mouse cursor over a top-level menu item. The
popup menu contains lower-level menu items that are associated with the top-level
menu item.

2. State the difference between the sidebar menu and sliding menu.
Sliding menu:
It is a vertical block that floats on left side of the screen and invokes when
cursor is moved over the connected object.
Side bar menu:It displays the options on the side of the menu.
Exercise:-
1. Write a program to design a pull down menu using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Practical 14 - 2</title>
<style type="text/css">
{
padding: 0;
}
body
{
background : #ffff66;
}
.drop-mu
{
margin:0 auto; width: 1300px;
}
.drop-mu ul
{
list-style: none; margin-top: 2%;

}
.drop-mu ul li
{
width: 200px; height: 40px;

background: #ff0066; float: left;


text-align: center; line-height: 40px; font-size: 20px; position: relative; border: 1px solid #fff;
}
.drop-mu ul li:hover
{
background:#6699ff;
}
.drop-mu ul ul
{
display: none;
}
#second
{
margin: -40px; margin-left: 220px;
}
.drop-mu ul li:hover > ul
{
display: block;
}
</style>
</head>
<body>
<div class="drop-mu">
<ul>
<li>Option</li>

<li>Option</li>
<li>Menu
<ul>

<li>Options</li>
<li>Another Menu
<ul id="second">
<li>Options</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>Options</li>

</ul>

</li>
<li>Option</li>
<li>Option</li>

</ul>

</div>
</body>
</html>

Output:

You might also like