We Keep Coding

SubMenu Slide out from right side of screen

On click of horizontal main menu,sub menu should slide from right on to the main menu and hide the main menu.

I created a simple example for your, it shows a simple transition for the side-menu after clicking on the menu item
HTML
<ul id="menu">
<li>Item 1
<ul class="sub_menu">
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3</li>
</ul>
</li>
<li>Item 2 </li>
<li>Item 3 </li>
<li>Item 4 </li>
</ul>
JS
$(function () {
$('#menu > li').click(function() {
var show = !$(this).find('.sub_menu').hasClass('show');
$('.sub_menu').removeClass('show');
// Show if the sub-menu is hidden
if (show) {
$(this).find('.sub_menu').addClass('show');
}
});
});
CSS
#menu {
padding: 0;
border: 1px solid #ccc;
background: #fff;
list-style: none;
position: relative;
border-bottom: 0;
}
li {
padding: 10px 15px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
li:hover {
background: #f5f5f5;
}
.sub_menu {
padding: 0;
border: 1px solid #ccc;
background: #fff;
list-style: none;
z-index: 1;
opacity: 0.5;
position: absolute;
left: -100%;
top: -1px;
width: 70%;
height: 100%;
transition: all 0.7s;
}
.sub_menu.show {
opacity: 1;
left: -1px;
box-shadow: 0 0 5px #ccc;
}
And you can find a working JSFiddle here https://jsfiddle.net/LeoAref/5fq3qdm1/

<script>
$('#charts-menu').click(function() {
$('li').not(this).find('ul').hide();
$(this).find('ul').show();
});
</script>
<script type="text/javascript">
$( '#charts-menu ul li').click(function(){
// by default, hide all li's
$( '#charts-menu ul li').toggle();
// show only the selected li
$( this ).show('key');
$('.sub_nav ul li').show('slow');
$('.sub_nav ul li').click(function(){
$( this ).hide('key');
$('#charts-menu ul li').toggle();
})
});
</script>
/*Sub Nav*/
.navbar-nav > li , .sub_nav { position:inherit;}
.sub_nav{ float:left; width:65%;border-bottom: 1px solid #eee;box-shadow:0 4px 6px #999; position:absolute; left:0px; min-height:36px; display:none;}
.sub_nav ul { margin:0px; padding:0px;}
.sub_nav ul li{ float:left; list-style-type:none;padding-right: 50px;}
.sub_nav ul li:hover, .sub_nav ul li.active{background:#fff;height:34px;}
.sub_nav ul li a span{background:#fff;}
.open .sub_nav{ display:block;}
.open .sub_nav .dropdown-menu{ display:block; top:0px; max-width:1000px; width:100%; background:none; box-shadow:inherit; left:50%; margin-left:-29%; border:none;}
#navbar li.open{ margin-bottom:36px;}
.sub_nav ul li.active a span{ background:#fff; width:100%; height:15px; position:absolute; bottom:-10px; left:0;}
<div id="charts-menu">
<ul class="nav navbar-nav" id="myCharts">
<li>
<a id="trigger_Nested-summary" class="select-market" data-toggle="pill" href="#summary" data-intro="this is summary" data-position="top">
<img src="/static/images/MARKET-icon.png">
Summary
</a></li>
{% for key,value in charts.items %}
<li class="dropdown">
</span-->
<div class="sub_nav">
<ul id='Nested-{{key}}'>
{% for chart in value %}
{% if chart.id == 1 %}
<li class="orange">{{chart.name}}<span></span></li>
{% else %}
<li>{{chart.name}}<span></span></li>
{% endif %}
{% endfor %}
</ul></div>
</li>
{% endfor %}
</ul>
</div>

How to Divide Navigational Bar using HTML/CSS

I have a navigation bar in my webpage, but i was not able to divide it. Some text to be on the left side and some text to be on the right side. I tried using this code from this reference: http://www.w3schools.com/css/css_navbar.asp
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Login</li>
</ul>
</ul>
But this doesn't seem to work. When i add that code in
<ul style="float:right;list-style-type:none;">
nothing happens.
Is their a better way of doing it?
Here is my list code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<li>
<a href="#contact" >Contact</a>
</li>
<li>
<a href="#services" >Join Us</a>
</li>
<li>
<a href="#about" >About</a>
</li>
<li>
<a href="#top" >Home</a>
</li>
</section>

Take a look in your case in WorkingLink
You should first correct you markup then correct your css:
here i attach all correct form:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>Contact</li>
<li>Join Us</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Home</li>
</ul>
</ul>
<div>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}

you can try this one:
ul li
{
float:left;
padding:5px;
}
ul li a
{
padding:5px 10px;
color:#666666;
text-decoration:none;
font-size:18px;
background:#FFFFFF;
}
ul li a:hover
{
background:black;
color:white;
}
DEMO HERE
OR
.container
{
background:gray;
width:200px;
}
.container li
{
padding:5px 10px;
color:#666666;
background:green;
width:100%;
font-size:18px;
list-style-type:none;
}
.container li a
{
text-decoration:none;
}
.container li a:hover
{
background:red;
width:100%;
display:block;
padding:5px;
}
DEMO

Show submenu with css

this is my menu. I would like to show the submenu (in the last item) when I pass the mouse over the last item. I'm trying to do it with css only but it doesn't work. this is the code
#submenu {
display: block;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav>
Is it possibile to show/hide the submenu when I mouseover/mousout on the last nav item?

This is how you can do this:
nav a.last:hover+#submenu { display:block;}
Complete running example:
#submenu {
display: none;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
nav a.last:hover+#submenu { display:block;}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav

<a> can't be nested inside another <a>. You html should be like following.
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
and css should be
nav .last:hover + #submenu {
display: block;
}

#submenu { display:block; position:absolute;float:right;right:26px;background-color:#f1f3f5;width:21%;}
#submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right;}
#submenu li:first-child { padding-top: 10px;}
#submenu li:last-child { border-bottom: none;}
#submenu li a {border-right: 0 !important;padding:5px 2px 0 0;}
#submenu { display:none;}
nav .parent:hover #submenu { display:block;}
<html>
<nav>
First item
Second item
<span class="parent">
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</span>
</nav>
</html>

How can I change the styles of my menu on click?

How can I change the style of active menu/submenu which is selected by user? When I click a submenu, I want that submenu and its parent menu to have a different style (like hover, but permanent).
/*jQuery time*/
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
/*custom font for text*/
#import url(http://fonts.googleapis.com/css?family=Nunito);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: http://fortawesome.github.io/Font-Awesome/ */
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
/*Basic reset*/
* {margin: 0; padding: 0;}
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
/*list items*/
#accordian li {
list-style-type: none;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Reports</li>
<li>Search</li>
<li>Graphs</li>
<li>Settings</li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li class="active">
<h3><span class="icon-tasks"></span>Tasks</h3>
<ul>
<li>Today's tasks</li>
<li>Urgent</li>
<li>Overdues</li>
<li>Recurring</li>
<li>Settings</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Calendar</h3>
<ul>
<li>Current Month</li>
<li>Current Week</li>
<li>Previous Month</li>
<li>Previous Week</li>
<li>Next Month</li>
<li>Next Week</li>
<li>Team Calendar</li>
<li>Private Calendar</li>
<li>Settings</li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>Favourites</h3>
<ul>
<li>Global favs</li>
<li>My favs</li>
<li>Team favs</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle.

Just add this javascript code:
$("#accordian h3").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('#accordian li a').click(function(){
$('.submenu-active').removeClass('submenu-active');
$(this).addClass('submenu-active');
});
and this CSS:
.active{
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
color: red; /* NOTE i INTENTIONALLY ADDED RED COLOR TO ILLUSTRATE BETTER */
}
.submenu-active{
background: #003545;
border-left: 5px solid lightgreen;
}
try this DEMO
Explanation:
When you click on a menu item you want to remove the .active class from the previously active item and set it to the clicked item. The same is applied to the submenu item where I add .submenu-active class instead .active

You can add .selected class to your CSS file:
.selected {
background-color: <your_color>;
}
And in your Javascript file:
$('#accordian li ul li').click(function(){
$('#accordian li ul li').removeClass('selected');
$(this).addClass('selected');
});

Create a css class with style you want. Add some class to your li's (for example class="li_to_click". Then use following code:
$('.li_to_click').click(function() {
$(this).toggleClass('class_with_style');
$(this).parent().toggleClass('class_with_style');
});
You may want to change the code according to your needs.

How to make active menu item with highlight style?

I wish to make the active menu item highlighted with a coloured square.
.main-menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
.main-menu li {
list-style: none;
display: inline-block;
padding: 40px 0;
}
.main-menu a {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
margin-right: 5px;
padding: 5px 5px;
margin: 0;
border-radius: 3px;
/*color: #fff;*/
line-height: 24px;
display: inline-block;
}
.main-menu a:hover {
background-color: #F78E21;
color: #fff;
}
<div class="main-menu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>About Us</li>
<li>Projects</li>
<li>Gallery</li>
<li>TV Appearances</li>
<li>Events</li>
<li>Links</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>

Is it it?
.main-menu a:hover,
.main-menu a.active{
background-color: #F78E21;
color: #fff;
}
If don't actually have the class="active" and asking how to add it for each page dynamically, that would be a big question. Well, if it is all static code then just manually add it on each page. If it's in a CMS, then look for solutions for that platform. If you're looking for Javascript solutions, check out this post jQuery add class .active on menu

Try this sample of code. Hope this help.
HTML Snippet
<div class="main-menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Us</li>
<li>Projects</li>
<li>Gallery</li>
</ul>
JS Code
$(function(){
$('ul').on('click','a', function(){
$('a').removeClass();
$(this).addClass('active');
});
});
CSS Styel(Add this into your css section-you can change whatever style you want)
.active{
border:1px solid red;
color : red;
}