I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load, like so:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to set a style to the LI element (a different background color and a red highlighted text) once the page loads. So, when I click on "New Appointment", on the new page, the LI element should look like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();
I´ve created a fiddle that will make the buttons turn it´s background when pushed.
then you will make to them tu "unpush" when others are pushed.
try this fiddle.
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
EDIT
Anyway, if you want to do it after page is loaded, you can use document.ready:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$("#new").addClass('topmenu-selectedsub');
});
There is the demo:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$('#new').addClass('topmenu-selectedsub');
$('.topmenu-tab-appointments').show();
});
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
To do this you would normally use a sever side language to set a class on loading the page (i.e; on the About page add the class about-page to body, or the class current to the about link). But to do it with jQuery only you would need to know the urls of the pages.
$(document).on('ready', function(){
var $links = $('nav a'),
links_array = [],
current_url = window.location.pathname,
current_link_idx;
// we dont have an actual url so we'll pretend here
// for the sake of the snippet/preview
current_url = '/about';
$links.each(function(){
links_array.push($(this).attr('href'));
});
current_link_idx = links_array.indexOf(current_url);
$links.eq(current_link_idx).addClass('current-page');
});
.current-page {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
About
Contact
Etc
</nav>
Obviously, if you have complex nav/urls, this isn't bulletproof. You'll need to do some fiddling with the current_url, maybe splitting it into fragments.
Still, this is best done server side.
See this working Demo
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
$(".topmenu-ul li").css("background-color","")
$(this).css("background-color","red")
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$("#topmenu-ul li a").click(function() {
$("#topmenu-ul li a").css("background-color","")
$(this).css("background-color","red")
});
You can put whatever color you like to add. Its upto you , I have just shown you how to do it
Related
I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..
I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
When the user clicks the menu bar <img> on the top right of the page, the <ul> display property should be changed from none to display: block and vice versa. I have global variables for the image (to listen for clicks) and for the ul (to select the display property).
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
if (menu.style.display == none) {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
menuButton.addEventListener("click", menuclick);
body {
background-color: rgb(40, 40, 40);
font-size: 16px;
margin: 0 auto;
font-family: helvetica, arial;
}
header {
position: relative;
background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
min-height: 40px;
box-shadow: 0px 0px 5px black inset;
}
header h1 {
position: relative;
padding: 10px;
font-style: italic;
font-size: 1.2em;
font-weight: bold;
color: white;
}
#h1s {
font-size: .6em;
}
img {
position: absolute;
top: 0px;
right: 10px;
}
header ul {
position: relative;
display: none;
}
header ul li {
background-color: red;
text-align: center;
height: 20px;
background-color: grey;
box-shadow: 0px 0px 1px black inset;
}
header ul li a {
text-decoration: none;
color: white;
line-height: 20px;
font-size: .6em;
}
<div id="page">
<header>
<h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
<img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
<ul id="navlink">
<li>home</li>
<li>about</li>
<li>bio</li>
</ul>
</header>
</div>
You can use the setAttribute() to do the work for you. and you forget to put 'none' in single quotes.
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
if (menu.style.display === 'none') {
menu.setAttribute("style", "display:block");
} else {
menu.setAttribute("style", "display:none");
}
}
menuButton.addEventListener("click", menuclick);
I recommend you to use a css class to show/hide the menu items instead of using inline styles. See Element.classList.toggle:
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
menu.classList.toggle("active");
}
menuButton.addEventListener("click", menuclick);
body {
background-color: rgb(40, 40, 40);
font-size: 16px;
margin: 0 auto;
font-family: helvetica, arial;
}
header {
position: relative;
background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
min-height: 40px;
box-shadow: 0px 0px 5px black inset;
}
header h1 {
position: relative;
padding: 10px;
font-style: italic;
font-size: 1.2em;
font-weight: bold;
color: white;
}
#h1s {
font-size: .6em;
}
img {
position: absolute;
top: 0px;
right: 10px;
}
header ul {
position: relative;
display: none;
}
header ul.active {
display: block;
}
header ul li {
background-color: red;
text-align: center;
height: 20px;
background-color: grey;
box-shadow: 0px 0px 1px black inset;
}
header ul li a {
text-decoration: none;
color: white;
line-height: 20px;
font-size: .6em;
}
<div id="page">
<header>
<h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
<img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
<ul id="navlink">
<li>home</li>
<li>about</li>
<li>bio</li>
</ul>
</header>
</div>
i have a slide-menu that works well but i want it to lower the opacity of the rest of the website when clicked, what i'm i missing? here's the slide-menu js
$(document).ready(function() {
$('.slideout-menu-toggle').on('click', function(event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
if (slideoutMenu.hasClass("open")) {
$('body').animate({
'margin-left': slideoutMenuWidth
});
} else {
$('body').animate({
'margin-left': "0px"
}, 250);
}
});
});
.slideout-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background: #333;
z-index: 100;
}
.slideout-menu h3 {
position: relative;
padding: 20px 10px;
color: #999;
font-size: 1.2em;
font-weight: 400;
border-bottom: 0px solid #222;
}
.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
background: #222;
color: #999;
text-decoration: none;
vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
color: #fff;
}
.slideout-menu ul {
list-style: none;
font-weight: 300;
border-top: 1px solid #151515;
border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
border-top: 1px solid #454545;
border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
position: relative;
display: block;
padding: 10px;
color: #999;
text-decoration: none;
}
.slideout-menu ul li a:hover {
background: #000;
color: #fff;
}
.slideout-menu ul li a i {
position: absolute;
top: 15px;
right: 10px;
opacity: .5;
}
<div class="slideout-menu">
<h3>Last Week×</h3>
<center>
<img border="0px" draggable="false" align="middle" src="img/fbump.png" alt="dundaah_logo" width="220" height="220">
</center>
<ul>
<li>
Dundaah
</li>
<li>
Pics
</li>
<li>
Videos
</li>
<li>
Music
</li>
</ul>
</div>
thanks
You can use $(selector).fadeTo(duration,opacity) or you can prepare a class/id in your css that contains the desired opacity and then use $(selector).attr('class','newClass').
When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}
During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>