Posted 10 years ago
·
Author
Here is the basic code for creating a tabbed layout using a YUI that IMVU incorporates in their homepages. With this code you can have multiple pages for your profile without needing to create extra html pages and have them hosted off site. This could save you time, money and headaches.
This code is very basic, you will want to heavily modify it to suit your needs. Obviously the pages can be whatever you like. So go ahead and change their content and titles.
Live preview: http://css-tricks.com/examples/SimpleTabbedBox/
More information: http://css-tricks.com/simple-tabbed-box/
To modify the page titles or add more pages, edit this part of the code:
To modify the content of the pages or add more pages, modify this code:
The rest of the work with mostly be with the css, styling it to make it look the way you want.
Full Code
This code is very basic, you will want to heavily modify it to suit your needs. Obviously the pages can be whatever you like. So go ahead and change their content and titles.
Live preview: http://css-tricks.com/examples/SimpleTabbedBox/
More information: http://css-tricks.com/simple-tabbed-box/
To modify the page titles or add more pages, edit this part of the code:
<ul class="yui-nav">
<li class="selected"><a href="#">About Me</a></li>
<li><a href="#">Special Someone</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Other</a></li>
</ul>To modify the content of the pages or add more pages, modify this code:
<div class="yui-content">
<div>
About Me Page
</div>
<div>
Special Someone Page
</div>
<div>
Links Page
</div>
<div>
Other Page
</div>
</div>The rest of the work with mostly be with the css, styling it to make it look the way you want.
Full Code
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
<style type="text/css">
#content-explorer {
padding-top: 20px;
width:500px;
line-height:normal;
margin: 0px auto;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;
}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;
}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;
}
div.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">About Me</a></li>
<li><a href="#">Special Someone</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Other</a></li>
</ul>
<div class="yui-content">
<div>
About Me Page
</div>
<div>
Special Someone Page
</div>
<div>
Links Page
</div>
<div>
Other Page
</div>
</div>
</div>
</body>
</html>