the bootstrap can't show style right use those code:
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>登陆</title>
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body class='main page'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</body>
</html>
it's so ugly.
i run it on vscode with node.js windows11, chrome.
this result is so ugly ,the net show is so pretty, what' wrong with my code which all are copied from the bootstrap net.
what's wrong with my code? it's all from the bootstrap.com
Related
I am new to Node.js. I try to learn Node.js and make a simple blog based on the Node.js that I learn. I face a problem in my coding as my node.js syntax is not functioning. I have a coding error in index.ejs, and I can't seem to connect to MongoDB until I fix it. I tried to find a solution to this problem, but I can't seem to fix it. Here is my code in index.ejs. A little help would be appreciated. Thank you.
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); -%>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<%include('layouts/navbar'); ->
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on September 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2>
<p class="post-meta">
Posted by
Start Bootstrap
on September 18, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Science has not yet mastered prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next year and yet far too little for the next ten.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on August 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on July 8, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2022</div>
</div>
</div>
</div>
<%- include('layouts/footer'): -%>
<%- include('layouts/scripts'); -%>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
enter image description here
I'm trying to get bootstrap tabs to work, but I'm having trouble. When I click on the tab, it doesn't show the right content. Here's my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
before the
<ul class="nav nav-tabs MentorProfile_Tabs">
<li class="active nav-link"><a data-toggle="tab" href="#experience">Experience</a></li>
<li class="nav-link"><a data-toggle="tab" href="#reviews">Reviews {{numReviews}}</a></li>
</ul>
<div class="tab-content">
<div id="experience" class="tab-pane fade in active" role="tabpanel">
{{#experience}}
<div class="row MentorProfile_ExperienceItem">
<div class="col-md-2"></div>
<div class="col-md-7">
<p class="MentorProfile_ExperienceItemTitle">{{title}}</p>
<p class="MentorProfile_ExperienceItemCompany">{{company}}</p>
</div>
<div class="col-md-3">
<p class="MentorProfile_ExperienceItemDate">{{dateString}}</p>
</div>
</div>
{{/experience}}
</div>
<div id="reviews" class="tab-pane fade" role="tabpanel">
<div class="row MentorProfile_Reviews">
{{#reviews}}
<div class="row MentorProfile_Review">
<div class="row">
<div class="col-sm-8 MentorProfile_Reviews_UserName">{{firstName}} {{lastName}}</div>
<div class="col-md-4">{{{ratingHtml}}}</div>
</div>
<div class="row MentorProfile_Reviews_UserReview">
{{review}}
</div>
</div>
{{/reviews}}
{{^reviews}}
<div class="row MentorProfile_Review">There are no reviews for this mentor at this time.</div>
{{/reviews}}
</div>
</div>
</div>
The way bootstrap 5 tabs works little bit different.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Hi im trying to make a navbar with 3 link in container class.I tried justify content between on navbar but it doesnt work justify content center works but between class doesnt work on navbar links displays like block.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex ">
<div class="container justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<ul class="navbar-nav d-flex flex-row align-items-center justify-content-between w-100">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
You can try this.
that is because you are using flex on different element and justify-content in different element,
my suggestion is to use this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container d-flex justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
also as a bonus suggestion use header instead of nav and replace the first div with nav for SEO purpose by using right semantic elements
I have created a layout page which has a top menu and a side navbar. My problem is when I've created a new razor view (content page). It seems to be centering from the whole page not taking into account the sidebar. Also my div container in my content page does not user all the screen. Am I missing something. I thought if I create my layout page with a side bar the content page would use the remaining page.
Thanks for any help,
Layout Code:-
<body>
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
</ul>
<ul class="navbar-nav ml-auto">
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
#*Sidebar*#
<div id="sidebar-wrapper">
</div>
<div class="container mt-3 mb-3">
#RenderBody()
</div>
#RenderSection("Styles", required: false)
#RenderSection("scripts", required: false)
</body>
I've added an image of the layout I am trying to achieve.
You can try this code below:
<div class="row">
<div class="col-md-3">
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills flex-column">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
Result:
I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.
(source: alvinsim.com)
But when i ported the code to JSF, it didn't show properly. I think it is because JSF couldn't find the YUI2 skin.
(source: alvinsim.com)
I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.
(source: alvinsim.com)
Below is my JSF code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>YUI2 Menu</title>
<h:outputStylesheet name="styles.css" library="css" />
<!-- ===== YUI Library Implementation ===== -->
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" />
<!-- <h:outputStylesheet name="yui/fonts/fonts-min.css" /> -->
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" />
<!-- <h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /> -->
<!-- Dependencies -->
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js">
</script>
<!-- <h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" />
<h:outputScript name="yui/container/container_core-min.js" /> -->
<!-- Source File -->
<!-- <script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"></script> -->
<h:outputScript name="yui/menu/menu-min.js" />
<!-- ===== END ===== -->
</h:head>
<h:body>
<div id="mymenubar" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#file">File</a>
<div id="file" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
New File <em class="helptext">Ctrl + N</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">New Folder</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#open">Open <em class="helptext">
Ctrl + O</em>
</a>
<div id="open" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 1</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 2</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 3</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 4</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Print <em class="helptext">Ctrl + P</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Edit</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Paste<em class="helptext">Ctrl + V</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Select All<em class="helptext">Ctrl + A</em>
</a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Find Again<em class="helptext">Ctrl + G</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Very Long Menu</a>
<div id="longMenu" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Very, very long Item 1</a>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 2</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 3</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 4</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 5</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 6</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 7</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 8</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 9</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 10</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 11</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 12</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 13</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 14</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 15</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 16</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 17</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 18</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 19</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YAHOO.util.Event.onDOMReady(function () {
// Instantiate a MenuBar, passing in the id of the HTML element
// representing the MenuBar.
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
autosubmenudisplay: true,
maxheight: 300
});
// Render the MenuBar instance
oMenuBar.render();
});
</script>
</h:body>
In my code, I did change from using the <link /> tag to <h:outputStylesheet /> tag (and same for the JavaScript), and it still doesn't work.
Can someone point me where I am doing it wrong?
After several rounds of debugging using firebug and IE9's own debugging tool, and code switching, I finally realized why it didn't work. It was a simple mistaken which was overlooked when porting my code from HTML to JSF.
The reason it didn't work is because I left out the code to load the YUI skin in the <h:body /> or parent element. So the <h:body /> tag should look like <h:body styleClass="yui-skin-sam">.
And the end result is below
(source: alvinsim.com)