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.
Related
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
I have an eBay shop and when I make a listing I have a pre made template and I just import information to this template.
I have a short description, features, and specifications. And I need to add automatically <li></li> to every line and a pre made HTML table with custom style, Which will know how to separate with "/" symbol like I have in my private listing tool.
Is this even possible? And if it is any idea how?
I do not believe Magento works in that manner however there is an easy efficient way to accomplish this manually.
Try putting the code in Sumblime text 3 with teh Emmet plugin.
From there you can type a command like ul>li*8 (the 8 is the # of items or <li></li> tags) and then press the tab key.
the results will be
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
From there you can fill in the blanks between the <li></li>.
I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
There seems to be conflicting examples in documents relating to the <nav> tag in html5. Most examples I've seen use this:
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
But I'm wondering if that's only because people are used to using divs. There are examples that I've seen that simply do this
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
The second way seems cleaner and more semantic to me. Is there an "official" correct version? Is there a good reason to still use a <ul> inside the nav tag rather than just use anchor elements directly?
Both examples are semantic.
In the first example, the list of anchors is explicitly an unordered list. In the second example, the list of links is just a collection of anchor elements.
If you simply want a one-dimensional collection of links, I recommend sticking with
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
however, using ul elements allows for explicit hierarchical menus (such as drop-downs or tree-lists):
<nav>
<ul>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
</ul>
</nav>
The only real difference might be how search engines might look at the links. When in an unordered list Google might for example understand that all the items in that list are related. In the second example Google might just as well assume none of the links are related. Google can use that information for indexing and display your information more accurately.
They may display the same, but really a lot of markup is about how information should be presented if there was no style attached to the page at all or if a bot is searching your website for relevant information.
You can use either.
A list only tends to be used as a list of links is generally just that, a list. But, it's up to you.
There is no real difference between them. However like Caimen said, search engines use the page markup to group data to better web search results. I'd advise you use the first if the links are quite similar on topic (eg for a blog) and the second if the links aren't so similar (for navigating results from a website search).
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.