I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element
Related
When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.
So I'm learning web development on my own since I'm a CS major and it appears that my school doesn't have an option for that in cs (IT only). Right now I've been using youtube, Microsoft virtual academy, codecademy(not pro), and khan academy. Kind of besides the point but my question is I have pills in bootstrap, I want to have a list under each pill that's only accessable by clicking on that pill. The way I have it setup is that the pill is a shortcut to the list that is further down the page, is there a way for me to hide the lists so that they're only specific to the active pill without me having add each lists down the page, using html,css, or bootstrap? This is what I've been working with, I haven't moved on to js or php or any scripting, I do know python but I don't know how to implement scripts in html yet.
code below
<ul class = "nav nav-pills">
<li class ="active"> Engineering </li>
<li> Medical </li>
<li> Education </li>
<li> Jobs for students </li>
</div>
</div>
<div class ="eng-company-list">
<div class = "container">
<ul id="engineering-positions">
<li> Google </li>
<li> Amazon </li>
<li> Facebook </li>
<li> Twitter </li>
<li> Pandora </li>
<li> Dropbox </li>
<li> Pinterest </li>
<li> Khan Academy </li>
<li> Zynga </li>
<li> EA </li>
<li> Sony </li>
<li> Intel </li>
</ul>
</div>
</div>
<div class ="edu-list">
<div class ="container">
<ul id = "edu-positions">
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
</div>
</div>
like right now I click on the Engineering pill and it displays the eng-position list AND the edu-positions list, what I want to do is hide the edu-positions list from engineering and subsequently Jobs for students, Medical, etc.
You can use the display: none; css property: value pair on a default element and psuedo classes.
For example, name each container uniquely. (e.g. engineering-container, edu-container) and set css property "display" to "none" on both. Use relative positioning in your css and define the positions in which the container will reside. You can also use x-index values to place the container behind your main container.
Then use the :hover pseudo class on your primary navbar and the hidden containers to make it show. Set the :hover display values to block. So when you hover over the navbar tag "engineering", the list will also expand and show for the list you've associated with the engineering navbar link.
Sorry for not giving you a step-by-step details, but it can be done with just css. It would be easier with jQuery. But as the remark made in an earlier comment, you should learn css layout first. It will make you a better developer and you will need to know it pretty well if you're going to become a developer.
So, since you don't know js, I highly recommend you look into CSS psuedo classes. With it, you can get a navigation list to expand and retract. You will have to just make sure that the :hover includes your links else it will retract once you move off the div because it no longer the active element.
Try this:
<header id="navigation" class="nav nav-pills">
<ul class="menu-content" style="display: none;">
<li class="menu-link active">Engineering</li>
<li class="menu-link">Medical</li>
</ul>
</header>
And at end of body tag paste this:
<script type="text/javascript">
function showhide() {
var nav = document.getElementbyId('navigation');
if(nav.style.display == 'none') {
nav.style.display = 'block';
} else {
nav.style.display = 'none';
}
}
</script>
Or I found 100% open-source example of navigation which you want by Bootstrap on github https://github.com/BlackrockDigital/startbootstrap-logo-nav.
<ul style="padding-left:0px;list-style:none">
<li style="display:inline"> <strong> Home </strong> </li>
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
<ul style="padding-left:0px">
<li> find more </li>
<li> share more</li>
</ul>
</li>
<li style="display:inline;margin-left:40px"><strong> Edit </strong></li>
<li style="display:inline;margin-left:40px"><strong> Privacy </strong></li>
</ul>
</div>
Could any one tell me where Im doing wrong?why the find more and share more options goes down the home tab but not below the photos tab ? and also any other listed options goes below the home tab but i want them to be placed one below the photos and other below the edit tab .Take a look at these http://jsfiddle.net/karthik_64/HXqeD/4/
I wanted it to be like these
home photos edit Privacy
find more zoom options
share more more
Please help me with these.Any help is greatly appreciated. Thanks niko
what about http://jsfiddle.net/dfNjA/ ?
Replacing
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
With
<li style="display:inline-block;margin-left:40px"> <strong>Photos</strong>
will do the trick...
I am trying to develop/design a main menu/site map for our website.
The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.
On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.
Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.
Here's what I've got so far:
<ul>
<li>
<ul>
<li>
Collapse "Menu Item 1"
</li>
<li>
Add "Menu Item 1" to Favourites
</li>
<li>
Menu Item 1
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
Expand "Menu Item 2"
</li>
<li>
Add "Menu Item 2" to Favourites
</li>
<li>
Menu Item 2
</li>
</ul>
</li>
<li>
<ul>
<li>
Open "Menu Item 3"
</li>
<li>
Add "Menu Item 3" to Favourites
</li>
<li>
Menu Item 3
</li>
</ul>
</li>
</ul>
As you can see, things start to get very complicated very quickly.
Is this the best way to convey this information or am I over complicating the matter?
Can you think of a better way for me to do this?
IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.
Your tree should has following structure:
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:
...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.
According to first comment
Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:
Add to favs
But using JS you do something like this (pseudo-code):
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
It's the best way to provide good availability and functionality at the same time.
About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.
Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).
A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.
Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.