Blog

how to add text with small icon picture in the content area RSS

1 reply

Last post Mar 16, 2017 08:43 AM by JiyaoLee

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
polachan
Member

139 Points

638 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>
```
<!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>

JiyaoLee

Member

590 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.

<!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>
    <script>
        function ChangeContent(url) {
            document.getElementById('contentArea').src = url;
        }
    </script>
</head>

<body>

    <div class='sidebar' style="left: 10px; top: 0px">
        <ul>
            <li onclick="ChangeContent('/Home/About')">Staff Schedule</li>
            <li onclick="ChangeContent('/Account/login')">Logout</li>
        </ul>
    </div>
    <div style="left:210px">
        <iframe id="contentArea" style="width:100%;height:100vh" src="/Home/About"></iframe>
    </div>
</body>

</html>

2. modify "about" page.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div class="container">
        <img src="http://i.imgur.com/DzVxg3g.jpg" style="width:200px;height:200px" />
        <br />
        <span>Now do a christmas tree!</span>
    </div>
</body>
</html>

The following image shows the result,

Hope this will be helpful,

Best regards,
JiyaoLee

We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!

‹ Previous Thread|Next Thread ›