pav
10/7/2013 - 3:55 PM

style.css

tabbed_menu.html
content_copyfile_download
<html>
<head>
    <title>Menu Navigator</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript"> 



$(document).ready(function(){

$('ul.tabs li').click(function(){

if(!$(this).hasClass("selected")){
$('ul.tabs li').removeClass("selected");
$(this).addClass("selected");

var selectionId = $(this).attr('id');

$('.content').fadeOut('slow', function(){
$('div .page').css({'display':'none'});
$('div .page#'+selectionId).css({'display':'block'});

}).fadeIn('slow');
}
});
});

 
</script>
</head>
<body>
 <div class="tabbed-menu">
    <ul class="tabs">
        <li id="page1">page1</li>
        <li id="page2" class="selected">page2</li>
        <li id="page3">page3</li>
    </ul>
    <div class="content" id="page1">
        <div class="page" id="page1">
         <li>
             <p>Page1 ULorem Ipsum </p>
         </li>
        </div>
    </div>
    <div class="content" id="page2">
        <div class="page selected" id="page2">
            <li>
             <p>Page 2 Makenai </p>
            </li>
        </div>
    </div>
    <div class="content" id="page3">
        <div class="page" id="page3">
            <li>
             <p>Page 3 Bakemone</p>
            </li>
        </div>
    </div>
 </div>
</body>
</html>
style.css
content_copyfile_download
div.tabbed-menu {
font-family: "Helvetica";
font-size: 15px;
width: 600px; }

/*  This ul class defines how your menu options
will be arranged and also gives us a nice 
dividing line between the menu and the content. */
ul.tabs {
text-align: center;
list-style: none;
position: relative;
margin: 0;
padding: 0;
line-height: 26px;
color: #0088CC;
border-bottom: 1px solid #DDDDDD;
}

/*  This defines the look of the individual tabs of 
your menu when they are contained in a tabs class ul */
ul.tabs li {
margin-bottom: -1px;
padding: 3px 10px 0 10px;
border: 1px solid #DDDDDD;
background: #EFEFEF;

/*  inline-block tells the browser to arrange the list
    elements in a line rather than each element on its
    own line. */
display: inline-block;

/* The attributes here round the top left
    and right corners of the tabs. */
border-top-left-radius: 6px; 
border-top-right-radius: 6px;
}
/* This defines what a tab should look like when selected */
ul.tabs li.selected {
background: #FFF;
border-bottom-color: transparent;
}
/* This defines how a tab looks when your mouse hovers above it */
ul.tabs li:hover {
color: #333333;
cursor: pointer;
background: #FFFFFF;
}

/*  This centers all of the text within a page element */
div.page {
text-align: center;
}
/*  This overrides the text centering we defined above if
the text is within a list and also tells your browser
not to put bullet points next to the text. */
div.page li {
text-align: left;
list-style-type: none;
}

div .page.selected{
display:block;
}

div .page {
display:none;
}