Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items
im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only.
this is my code:
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li>
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
As i Understood by the documentation you need add pure-menu-open to any menu that you want to show, and some other classes to make it look decent, this is anyways what i came up with.
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li class="pure-menu pure-menu-open pure-menu-can-have-children pure-menu-has-children">
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
You can see a live version here http://jsfiddle.net/p4hus/
Related
I am trying to write a HTML documentation for my team project. When I was trying to create a navigation menu with nested structure, the second degree doesn't show any content. Can I get some suggestion on possible cause of my problem?
<section class="contents">
<h1 id="contents">Contents</h1>
<ul id="menu">
<li>Problem Statement and Project Overview
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>Use Case</li>
<li>Development Timeline</li>
<li>Technology </li>
<li>Data Sources</li>
<li>Team Capabilities</li>
<li>User Interface</li>
</ul>
</section>
You just need to put some content between your a tags
<section class="contents">
<h1 id="contents">Contents</h1>
<ul id="menu">
<li>Problem Statement and Project Overview
<ul>
<li>overview</li>
<li>background</li>
<li>problem</li>
<li>solution</li>
</ul>
</li>
<li>Use Case</li>
<li>Development Timeline</li>
<li>Technology </li>
<li>Data Sources</li>
<li>Team Capabilities</li>
<li>User Interface</li>
</ul>
</section>
I want to make two horizontal nav menus, one next to the logo img on the left and the other one on the right side using materializecss framework, but the logo-img is overlapped with the first menu.
.nav-logo {
width: 6.5rem;
}
<nav class="transparent">
<div class="container">
<a href="#" class="brand-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Adyen_Corporate_Logo.svg/1024px-Adyen_Corporate_Logo.svg.png" alt=""
class="responsive-img nav-logo"></a>
<ul>
<li>Our solution</li>
<li>Customers</li>
<li>About us</li>
<li>Documentation</li>
</ul>
<ul id="nav-mobile" class="right">
<li><i class="material-icons left grey-text text-darken-2 center-align">search</i></li>
<li>Contatc us</li>
<li>Log in</li>
<li>create an account
</li>
</ul>
</div>
</nav>
So I am trying to change the logo for a company I work for and when I tried to place it into the coding it screwed up the alignment of the header text. If someone could help me that would be great! I want the 5 groups of text to go right underneath the logo. With the logo aligning at the top left of the web page.Example Image of what is happening now
Coding is:
<div class="header">
<img class="Logo" src="https://www.maxgalaxy.net/SiteData/730/MWI_Images/20161004203121998.png" style="display:block">
</div>
<ul class="topnav">
<li><a class="active" href="https://www.hsviceplex.org/events-calendar/" target="new">EVENTS</a></li>
<li>SPONSORSHIPS/ADVERTISING</li>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>PARTY PACKAGES</li>
<!--
<li>Contact Us</li>
<li>Employment</li>
<li>Fundraising</li>
<li>The Blog</li>
<li>Gallery</li>
-->
<li class="icon">
☰
</li>
</ul>
I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?
Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}
Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.
Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>
I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>
I'm a novice and ran my code through an html validator.
Regarding my navigation I receive a message that reads: :Element ul not allowed as child of element ul in this context"
Here is the html structure:
<nav>
<div class="nav_container">
<ul class="navigation">
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
<ul class="subnav">
<li>home</li>
</ul>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
<ul class="subnav">
<li>shelving
</li><li>mantels</li>
</ul>
<ul class="subnav">
<li>news</li>
</ul>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</ul>
</div>
</nav>
Whats wrong with it? It looks fine across browsers. Should I be concerned or take action?
A ul can not be a direct child of another ul, it needs to be contained within an li
<ul class="navigation">
<li>
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
</li>
<li>
<ul class="subnav">
<li>home</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>shelving</li>
<li>mantels</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>news</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</li>
</ul>
you could also give the menu some headings by adding it in the li before the child ul,
you must wrap each of the inner ul with an li
<ul class="navigation">
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
Your structure is likely wrong. Logo is not a list or list-item. As well as list item that contains just another list is generally pointless.
Use heading element for logo (I usually use H1 for home page and H3 with link inside it for other pages):
<!-- for home page -->
<h1 id="logo">Company</h1>
<!-- for other pages -->
<h3 id="logo">Company</h3>
And make sure that your navigation has correct hierarchy like this:
<ul>
<li>Products
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
</ul>
</li>
<li>About
<ul>
<li>History</li>
<li>Contacts</li>
</ul>
</li>
</ul>
In the example, each LI has its own link and subsections of section that the link represents, and thus the link text is heading for subsections' list.
You need to wrap
<ul class="navigation">
<ul class="logo">
as
<ul class="navigation">
<li>
<ul class="logo">
...
</ul>
</li>
and so on...