I have an html file with side bar option . When I click the side bar menu , How can I shows correspoding link with small picture and text bottom of the picture in content area. My code is as given below. The content area should be displayed with corresponding
option of the side bar menu. Please help
Based on your description, you'd like to show a web page, when you click the side bar menu, a new page will show in the content area.
You can use iframe to show the new page.
Member
400 Points
1295 Posts
how to add text with small icon picture in the content area
Mar 15, 2017 07:57 PM|polachan|LINK
I have an html file with side bar option . When I click the side bar menu , How can I shows correspoding link with small picture and text bottom of the picture in content area. My code is as given below. The content area should be displayed with corresponding option of the side bar menu. Please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Item 1Item 2</title>
<style type="text/css">
.sidebar {
position: fixed;
width: 200px;
height: 100%;
background: #006064;
color: #DDD;
}
.sidebar > ul {
width: 200px;
list-style: none;
margin: 0px;
padding: 0px;
}
.sidebar > ul > li {
padding: 16px;
transition: 0.5s;
}
.sidebar > ul > li:hover {
background: #00838f;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class='sidebar' style="left: 10px; top: 0px">
<ul>
<li>Staff Schedule</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
Member
600 Points
262 Posts
Re: how to add text with small icon picture in the content area
Mar 16, 2017 08:43 AM|JiyaoLee|LINK
Hi polachan,
Based on your description, you'd like to show a web page, when you click the side bar menu, a new page will show in the content area.
You can use iframe to show the new page.
I make a simple demo,
1. Add javascript to the index view.
2. modify "about" page.
The following image shows the result,
Hope this will be helpful,
Best regards,
JiyaoLee