Convert hover custom Navbar to Click - javascript

Am a bit new to jQuery so please bear with me. I have this navbar menu that drops down on hover. Everything is working perfectly but my plan is to change the hover dropdown into a click and also hide the dropdowns when the outside html is clicked. I am not using any framework.
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving Licence</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
CSS
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
.tc-navigation li:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}


You're currently using the :hover state in the CSS to set different rules for certain DOM elements. CSS doesn't directly respond to click events (except for the :active state for links and buttons, which doesn't really help you here); so the easiest way to convert that to click events would be to have those click events toggle a CSS class on the element, which can then be used in the CSS exactly the same way you're currently using :hover.
$('.tc-navigation > li').on("click", function(e) {
$(this).toggleClass('showSubmenu');
$(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
return false; // keep the event from bubbling
});
// Hide menus when clicking outside them. Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
$('.tc-navigation > li').removeClass('showSubmenu')
});
#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
/* Changing this selector from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving License</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
</div>
(I had to add a container element to keep the submenus from falling offscreen; the positioning is still not quite right, I assume because your CSS depends on other page elements not shown here, but it's close enough to demonstrate the idea. Other than that the only change to your CSS was the one line where li:hover was changed to li.showSubmenu.)


Alright, Take a look on my menu
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
} else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
background: #bb0e0e;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #ddd;
background: #49505a;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
background: #ddd;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li class="has-sub">Transportation
<ul>
<li>Bus</li>
<li>Taxi</li>
<li>Air</li>
</ul>
</li>
<li>Car Rental Agencies</li>
<li>Driving Licence</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Abut us
<ul>
<li>Who We are</li>
<li>Our Vision</li>
<li>Photo Gallery</li>
</ul>
</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

Related

purple links in simple css dropdown menu

I am styling a very simple CSS drop down menu I found online, the problem is that I cannot make the text links to get colors, they all are just purple text. Here is the CSS code:
/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none;}
.last {border-right:solid 3px #282828;}
ul.menu >li>a:hover{color:#777;
}
ul.menu li ul{
padding: 0;
margin: 0;
list-style-type: none;
background: #fff;
position: absolute;
display: none;
}
ul.menu li:hover ul{
display: block;
color: #010101;
}
ul.menu li ul li a:link{
padding: 15px 20px;
display: block;
/* height: 40px;*/
line-height: 30px;
text-decoration: none;
color: #010101;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
And now here is the HTML code
<ul class="menu">
<li>
<div class="buttons">Stötar</div>
<ul>
<li>försvar</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li><div class="buttons">Gäng</div></li>
<li><div class="buttons">Staden</div></li>
<li><div class="buttons">Fängelse</div></li>
<li><div class="buttons">Shopping</div></li>
<li><div class="active">Beskydd</div></li>
<li class="last"><div class="buttons">Konto</div></li>
</ul>
If we put this code in a JSFiddle it looks ok and it seems like it can be fixed but when testing it in Google Chrome the link are just purple
JSFiddle
https://jsfiddle.net/k49edo16/
UPDATE:
It happens only on visited, any idea how to fix this ? ( I am new to CSS )

Replace
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
with
ul.menu li ul li a{
background: #555;
color: #ffffff;
}

Add color to for main links:
ul.menu >li>a
and add next line for sub-menu links.
ul.menu >li>ul>li>a{color:red;}
/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none; color:red;}
ul.menu >li>ul>li>a{color:red;}
.last {border-right:solid 3px #282828; }
ul.menu >li>a:hover{color:#777;
}
ul.menu li ul{
padding: 0;
margin: 0;
list-style-type: none;
background: #fff;
position: absolute;
display: none;
color:red;
}
ul.menu li:hover ul{
display: block;
color: #010101;
}
ul.menu li ul li a:link{
padding: 15px 20px;
display: block;
/* height: 40px;*/
line-height: 30px;
text-decoration: none;
color:red;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
<ul class="menu">
<li>
<div class="buttons">Stötar</div>
<ul>
<li>försvar</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li><div class="buttons">Gäng</div></li>
<li><div class="buttons">Staden</div></li>
<li><div class="buttons">Fängelse</div></li>
<li><div class="buttons">Shopping</div></li>
<li><div class="active">Beskydd</div></li>
<li class="last"><div class="buttons">Konto</div></li>
</ul>

could this be because the links are visited? You might need to set additional css classes for a:active, a:visited etc.

How can I hide and show submenu?

I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.
Here's the HTML:
<div class="content">
<div class="page-content">
</div>
<div class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<div class="nav">
<ul id="nav" >
<li><i class="fa fa-home"></i><span>Home</span></li>
<li><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li><i class="fa fa-gears"></i><span>Contact</span></li>
</ul>
</div>
</div>
</div>
Please help!

There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>profile.1</li>
<li>profile.2</li>
<li>profile.3</li>
</ul>
<li><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>About.1</li>
<li>About.2</li>
<li>About.3</li>
</ul>
</li>
<li><i class="fa fa-history"></i>Blog</li>
<li><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li>Deals.1</li>
<li>Deals.2</li>
<li>Deals.3</li>
</ul>
</li>
</ul>
</nav>
CSS (I took a lot of this from the original Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
and JS (This was just to toggle the icons):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});

try the following
css:
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
js:
$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});
http://jsfiddle.net/2tz4usnL/3/

Here is a Working Fiddle
Add this Scripts
$('#nav a .fa.fa-plus').on('click',function(){
$(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
$(this).closest('li').find('ul').toggleClass('active');
});
And this CSS
#nav li ul {
/*opacity: 0;*/ /* changed */
height: auto; /* changed */
display: none; /* added */
}
#nav li ul.active { /* added */
display:block;
}

on click menu not functioning

Once the menu is clicked it opens but then the other all can open too plus they all can be opened on hover. I have tried several combination of target eg. ul's li's but something i still wrong.
I have posted a fiddle below to but for some reason it doesn’t even work there at all.
i have a single menu working with this code not sure why it brakes down with this. to many levels in the ul li ul configuration? do I need to target a new id?
css
.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.dropmenu {
height: 20px;
width: 500px ;
}
.dropmenu li {
position: relative;
list-style: none;
float: left;
display: block;
z-index: 9999;
}
.dropmenu li a {
display: block;
padding: 0 14px;
height: 26px;
line-height: 25px;
text-decoration: none;
font-family: Verdana, Arial;
font-size: 13px;
color: #CCCCCC;
border-left: 1px solid #555555;
border-right: 1px solid #666666;
}
.dropmenu ul li:hover > a { color: #ff4200; }
.dropmenu li ul {
position: absolute;
top: 26px;
left: 0;
opacity: 0;
background: #222222;
-webkit-transition: opacity 0.2s ease-in-out 0.2s;
-moz-transition: opacity 0.2s ease-in-out 0.2s;
-o-transition: opacity 0.2s ease-in-out 0.2;
-ms-transition: opacity 0.2s ease-in-out 0.2s;
transition: opacity 0.2s ease-in-out 0.2s;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
display:none;
}
.dropmenu li:hover > ul { opacity: 1; }
.dropmenu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .3s ease .1s;
-moz-transition: height .3s ease .1s;
-o-transition: height .3s ease .1s;
-ms-transition: height .3s ease .1s;
transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0;
}
.dropmenu ul li a {
width: 120px;
padding: 0px 0px 0px 40px;
margin: 0;
border: none;
border: 1px solid #666666;
}
.dropmenu ul li:hover a {
background: #ffffff;
}
.dropmenu li:hover a {
background: #222222;
}
.dropmenu ul li:last-child a { border-radius: 0 0 5px 5px;}
.dropmenu a.mail { background: url(../images/arrow2small.gif) no-repeat 6px center; }
.dropmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.dropmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
html
<div class="menubar">
<div class="menubarleft">
<!-- Start Menu -->
<ul class="dropmenu" id="dropmenu">
<!-- Home -->
<li>Home
</li>
<!-- CPHome Close -->
<!-- Business Open -->
<li>Electrical
<ul>
<li>Control Panel</li>
<li>New Business</li>
<li>Enhance</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
<!-- 2nd Close -->
<!-- 3rd Open -->
<li><a href="#" class="dropsmall2" >Plumbing</a>
<ul>
<li>Control Panel</li>
<li>Manage domains</li>
<li>Domain wizard</li>
<li>Order domain</li>
<li>Manage hosting</li>
</ul>
</li>
<!-- 3rd Close -->
<!-- 4th Open -->
<li>Air & Water
<ul>
<li>Inbox</li>
<li>New Email </li>
<li>Quick message</li>
<li>Settings</li>
</ul>
</li>
<!-- 4th Close -->
<!-- 5th Open -->
<li>Natural Homes
<ul>
<li>Hobbiest</li>
<li>Startup </li>
<li>Companies</li>
<li>Entreupenuer</li>
</ul>
</li>
<!-- 5th close -->
</ul>
js
$('a.dropsmall2').click(function() {
$('#dropmenu ul').show('medium');
e.preventDefault();
return false;
});
$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('slow');
e.preventDefault();
return false;
});
$('#dropmenu ul').mouseleave(function() {
$(this).hide('slow');
return false;
});
https://jsfiddle.net/e9e17adm/1 - doesn’t work at all in the fiddle for some reason getting confused now

http://jsfiddle.net/e9e17adm/6/
Only change (other than including jQuery) was to make it
$(this).next('ul').show('medium');
instead of
$('#dropmenu ul').show('medium');
so that it only does the ul that they clicked on, not all ul elements in the #dropmenu

Menu bar active class Smarty template

I want the menu bar to switch the active class depending on the page it is on instead of only showing home as active, still very new to this thanks =) ( my site has smarty template )
<div id='cssmenu'>
<ul>
<li class='active'><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>
<li><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li>JOIN NOW</span></li>
<li>Member Login <img src="/tour/images/locky.png"height="22px" width="22px"></span> </li>
This is my menu css, not entirely sure you guys might need this but here it is.
#cssmenu {
background: #FCB9C5;
width: auto;
text-align: center;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #fff;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
#media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}

What you need is to assign in Smarty selected page.
For example:
$smarty->assign('selected_page', 'tour/category.php?id=4');
In PHP you could use for this $_SERVER['REQUEST_URI'] variable, probably something like this:
$smarty->assign('selected_page', substr($_SERVER['REQUEST_URI'],1));
should work fine.
And then in Smarty:
<div id='cssmenu'>
<ul>
<li {if $selected_page eq 'tour/'}class='active'{/if}><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li {if $selected_page eq 'tour/category.php?id='}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=5'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=59'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=58'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=donate'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=join'}class='active'{/if}>JOIN NOW</span></li>
<li {if $selected_page eq 'members/'}class='active'{/if}>Member Login <img src="/tour/images/locky.png"height="22px" width="22px"></span> </li>
EDIT Of course it would be much better if you put those menu data into array in PHP using url and anchor text. Then in Smarty you could use loop to display menu and you wouldn't need to write urls twice when you compare $selected_page with link url

To apply the 'active' class to a different < li > element you should perform a server side changing.
Please take a look at the following page:
http://www.smarty.net/forums/viewtopic.php?p=60336

How to show the titles properly in an expandable menu?

I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.

use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}

the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}

Categories