Develop Reference

Javascript tabs not working

When I click a tab on my navbar it will go to the tab, but once I move the mouse away from it will no longer show that it's selected but it will keep it's text color.
Here is the full code:
Html: https://codetidy.com/8744/
CSS: https://codetidy.com/8745/
So that I can better explain my problem here is an example:
Loads the website
Hovers over the about tab to click it
Then after tab has been clicked mouse has moved away but the tab didn't stay red

Try adding a more specific CSS selector to your custom CSS:
.nav > li > a:focus, .nav > li > a:hover {
background-color: red;
}
Working example of your code (after adding the class above)

As what I can see on your html code, why do you have a onClick function for tabs. There is already a documentation for bootstrap tabs. You just need to clear up your css also to get the desired output. You can do something like this as css but it is much better if you put an id for you navbar.
default:
.nav > li {
//enter code here
}
hover:
.nav > li:hover {
//enter code here
}
selected:
.nav > li.active {
//enter code here
}

Bugs on highlighted menu

First, I apologize to not post my code right here.
I'm not sure this is a good idea since this is a kind of full project.
You can find an online-version here
My menu is stick to the top.
When users scroll, or chosse a section, the correct section will be highlighted in the menu. But if you click to a section, then scroll down / up, 2 menu secions will be highlighted.
So I would like to understand where is the problem, and so, how can i fix it .

This is happen because of 2 reason 1 is css issue and other on is js
CSS issue happen because of :focus Pseudo class styles you used. You apply :hover, :focus, :active and .active class same style. In your code I found this
a, a:hover, a:focus, a:active, a.active {
color: #f5c845;
outline: 0 none;}
To solve this used following style after the above code snippets
.navbar-default .navbar-nav > li > a:focus{
color: #777;
border-bottom: none;}
To check your js issue can you please share your related js part for the one page scroll.

CSS Tab Control - How do I show only the first div?

Okay...I know there are already loads of Pure CSS Tab Controls out there...
Here is my HTML
<div class="tabs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="tabPage1">
<p>
Hello World
</p>
</div>
<div id="tabPage2">
<p>
Goodbye World
</p>
</div>
<div id="tabPage3">
<p>
Another World, somewhere far, far away!
</p>
</div>
</div>
Here is my CSS
.tabs > div {
display: none;
}
.tabs > div:target {
display: block;
}
There's no styling for this example as I'm only concerned with the behavior.
You can try it here...http://jsfiddle.net/rcrdC/
How do I get it to display the first div until an anchor is clicked?
How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?

from here , you can make the last one be display at the beginning with like this (working example)
.tabs > div:target ~ div:last-child,
.tabs > div{
display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
display: block;
}
Just move the first tabpage to be the last.

This is an interesting challenge. Unfortunately, I don't believe the intended result can be achieved (purely) with CSS.
We can show the first div easily enough using:
div:first-of-type { display: block; }
But I don't know of a way to select our previously :targeted divs without using JavaScript.
Here I've set up some jQuery to apply class .active on any div with an id that equals that of a clicked anchor href. From there we can override display: none; on divs of that class with some simple CSS:
$('li a').each(function () {
$(this).click(function () {
var active = $(this).attr('href');
$(active).addClass('active');
});
});
And here's the related CSS:
div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }
And a working example: http://jsfiddle.net/fjKUw/1/

showing the first tab on load should not be that hard. You can use the :first-of-type pseudo class. Something like this:
.tabs > div{
display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
display: block;
}
The second question is a bit harder. The first tab will be shown again as soon as your target moves to an anchor outside the tabs. http://jsfiddle.net/rcrdC/4/ You need some way to preserve state. The 'real life' solution would be to add a few lines of javascript to achieve this, as suggested already by #StuartKershaw.
If you insist on going fully css, you could use a (hidden) radio button to preserve the state. It is a bit hacky (inputs are not meant for that) and you would have to change your markup a bit, but it should be feasible.
An example of what I mean can be found here: http://jsfiddle.net/rcrdC/5/
Note that I placed some hidden radio buttons between the tabs. I replaced the links to the tabs by labels that reference those radio's. Then I use a combination of the :checked and the + selector to make things work. And the tab that is visible on load is the one with checked attribute.
Again, this is not the way I would recommend. You are adding to your markup, with the sole purpose of achieving a certain layout, which should be the task of your css. Also the stuff you need to add is far from semantically correct...

How to keep CSS/HTML dropdown from showing partially off-page?

I have a pure css/html dropdown menu, the code for which I pretty much stole from csswizardry here. It works like a charm; the only problem is that, if that menu item is on the far right side of the page, the dropdown items are half-off the page.
I'm working on a javascript solution; is there a way to fix this problem using just CSS?
EDIT: I'm looking for the dropdown content to move to the left so that the dropdown items are fully visible.

Looking at the code you based it on, instead of
#nav li:hover ul { left:0; }
...you'd want:
#nav li:hover ul { left:auto; right:0; }
Looks like you may need to adjust the right margin of #nav li if you're using the same CSS as csswizardry.

How to create a menu tree using HTML

I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this.
Can anyone help me solve this problem.
Thanks in advance.

Here is something very simple to start with.
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
EDIT
Implementing what I learned from #sushil bharwani.
Here is how I found the above URL i.e. at the courtesy of #sushil bharwani
http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

You don't need to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)
You can make vertical dropdown menus or (prettier example) horizontal menus using the techniques explained in the Sons of Suckerfish article at HTMLDog.
Simple and meaningful.
Sample
Here is a simple example. In it you can see the hover functionality working perfectly.
The CSS is not good, because it's only a sample.
To work on the style, disable the display: none; line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none; line to get the submenus to hide and only show on hover.
HTML
<nav>
<p>Collapsing:</p>
<ul class="collapsable">
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
<p>Not collapsing:</p>
<ul>
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
</nav>
CSS
nav li:hover {
background: #EEEEEE;
}
nav li>ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: ": { ";
}
nav li>ul::after {
content: " } ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
display: inline-block;
}
nav li>ul>li+li::before {
content: ", ";
}
Here is a jsfiddle: http://jsfiddle.net/x8dxv/

With a bit of javascript and a knowledge around CSS you can convert a simple UL LI list to a menu tree. its right that you can use jQuery if you understand it.
You can narrow your google search by Menu Tree using UL Li. or CSS to convert UL LI to tree.

Navigation menus are mostly created using a combination of UL and LI.
<UL id="Menu">
<LI>Home</LI>
<LI>Links</LI>
</UL>
And you can insert UL inside LI element and thus get a tree structure for navigation.

Here is a simply way to do it if you don't want to write one yourself..
http://www.mycssmenu.com/#css-menu-demo

You might want to look into some of the online tools that builds the menu for you. E.g. CSS Menu Generator

I am not sure if you will find your answer, but here is a list with several different types of vertical menus
http://css.maxdesign.com.au/listamatic2/index.htm
no javascript is involved in those examples