I want to add a top border to my navbar buttons when the mouse is hovered over them and then back to its original state when mouse is off the elements.
However my code does not seem to be working, I am using a function to do this in JavaScript as follows:
<script type = "text/javascript">
function border(element){
element.style.borderTop ='3px solid';
element.style.borderColor = '#d22b2b';
}
</script>
and the HTML:
<ul align="center">
<li onmouseover="border(this)">Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
With the above code nothing is happening at all when I hover the mouse over the first li element.
I updated your code and managed to get it working. Here is the jfiddle for it: http://jsfiddle.net/A2gkU/2/
The problem was that you had too much padding above/below the links, so even if there was a border showing up above, it got hidden by the padding.
HTML Codes:
<div id="navbar">
<ul align="center">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
CSS codes:
#navbar{
background-color: #fff;
overflow:hidden;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
padding:5px;
}
#navbar ul {list-style:none;
text-align: center;
margin: 5px;
font-family: Segoe UI;
font-size: 17px;
font-weight: bold;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration:none;
color:#302E2E;
padding-left: 15px;
background-color: #fff;
}
#navbar ul li a:hover { color: #F56; border-top: 3px solid #d22b2b;}
Related
It shows two events at same time:
jQuery Code:
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu=$(this).parent().find('.submenu');
submenu.addClass('active');
}
HTML:
<ul class="profile-menu">
<li>
<a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as User</a>
</li>
<ul class="profile-submenu submenu ">
<li>Login</li>
<li> Logout</li>
<li>Options</li>
<li>Circus</li>
</ul>
</ul>
CSS:
.submenu{
list-style: none;
padding: 0px;
border: 1px solid #aaa;
background: #fff;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
width: 250px;
position: absolute;
right: 20px;
display: none;
}
.submenu.active{ display: block; }
This program should show the menu on top right corner when touch on "User Logged in" but it can't.
I am trying to create a menu system that changes text based on what menu has been clicked on at the time, as I don't want to create dozen of pages that will be almost identical and require loads of loading.
I've looked online but I haven't found anything, probably because I haven't used the right key words but I was wondering what the best approach would be to accomplish this? I've found that you can use the visibility tag in css to hide text but this leaves a lot of blank lines and since i'm displaying a lot of text it would look awful
HTML:
<html>
<head>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<div id="accordian">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Menu 1</h3>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>
<h3><span class="icon-tasks"></span>Menu 2</h3>
<ul>
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Menu 3</h3>
<ul>
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Nunito);
* {margin: 0; padding: 0;}
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background: #003040;
background: linear-gradient(#003040, #002535);
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.15s;
}
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
jQuery:
$(document).ready(function(){
$("#accordian h3").click(function(){
if(!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
})
})
You don't need to change css, try to use hide() and show()
here is example
Thanks everyone for the help. I got it working by using an opentab function on the menu links and toggling display. Someone had suggested it but they seem to have deleted their answer.
I created a simple JQuery accordion at the top of my page in html, the problem is that everytime i click a box to slide down the page moves to the very top again. I dont get why this would even happen and have spent countless hours determining if its a css issue or JQuery.
Im a JQuery noob so im not sure if there is a specific control to fix this or not.
I will provide my code (there is also a content slider on the page):
CSS
.clear
{
clear:both;
}
body
{
background: #0B0909;
min-height: 200px;
}
.wrap
{
width:940px;
padding:10px;
margin:50px auto;
font-family: Arial, Helvetica, Times;
/* border: 3px ridge #FFDA00; */
}
.header
{
background: #0B0909;
color:#fff;
padding: 25px;
font-family: 'Special Elite', Arial, serif;
font-weight: 400;
text-align: center;
}
.sliderFade
{
position:relative;
width:940px;
height: 300px;
}
.sliderFade img
{
position:absolute;
left:0;
top:0;
border: 5px solid #FFDA00;
width:930px;
height: 295px;
}
#container1
{
position:relative;
width:940px;
height: 200px;
}
dl, dt, dd, ul, li, a
{
margin: 0;
padding: 0;
}
a
{
text-decoration: none;
font-size: 20px;
color: #0B0909;
outline: none;
font-family: 'Special Elite', Arial, serif;
}
li
{
padding-left: 2px;
list-style-type: none;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #FFDA00;
background-color: white;
height: 200px;
}
dl
{
width: 300px;
position:relative;
}
dt
{
padding-top: 4px;
background-color: #FFDA00;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #CDCDCD;
}
dt a
{
color: #0B0909;
font-size: 30px;
font-family: 'Special Elite', Arial, serif;
}
.footer
{
background: #0B0909;
color:#fff;
padding: 25px;
font: 0.8em, serif;
height: 100px;
border-top: 3px solid #FFDA00;
}
JQuery
$(function()
{
//Hide all images except the first in content slider
$('.sliderFade :gt(0)').hide();
setInterval(function()
{
$('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade');
//$('#star').clone().animate({height:"30px"}).appendTo('.outside');
}, 4000);
//hide all sub-windows on load
$("dd:not(:first)").hide();
//slide the window up on click
$("dt a").click(function()
{
$("dd").slideUp("slow");
$(this).parent("dt").next("dd").slideDown("normal");
});
});
HTML
<body>
<div class="outside">
<img id= "star" src="star.png" height="10px" width="15px">
</div>
<div class="wrap">
<div class="header" >
<h1> My web app </h2>
</div>
<div class="sliderFade">
<img id = "1stImage" src="space2.jpg">
<img id = "2ndImage" src="space.jpg">
<img id = "3rdImage" src="paint-types.jpg">
</div>
<div class="clear" />
<div id="container1">
<dl>
<dt>Home</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Blog</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Contact</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
</dl>
</div>
<div class="footer">
<dt>Blog</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Contact</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
</div>
</div>
</body>
thanks.
Add return false in click event...
$(function()
{
//Hide all images except the first in content slider
$('.sliderFade :gt(0)').hide();
setInterval(function()
{
$('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade');
//$('#star').clone().animate({height:"30px"}).appendTo('.outside');
}, 4000);
//hide all sub-windows on load
$("dd:not(:first)").hide();
//slide the window up on click
$("dt a").click(function()
{
$("dd").slideUp("slow");
$(this).parent("dt").next("dd").slideDown("normal");
return false;
});
});
hope this will work...
You'll need to use return false or preventDefault() to stop the anchor links from functioning on click.
i need to change selected sub menu background color. but, i dont know how to change background color, when i click the submenu.
jsfiddle: http://jsfiddle.net/BJQ6y/
my Css code :
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
My Html CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Bharatanatyam</li>
<li>
<ul id="3">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Kuchipudi</li>
</ul>
Sailaja </li>
<li>
<ul id="4">
<li>About Sailasudha</li>
<li>Admission</li>
<li>Presentation</li>
<li>Recticals</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>Downloads</li>
</ul>
Sailasudha </li>
<li>
<ul id="5">
<li>Philosophy</li>
<li>
<ul id="6">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
Nrityanasangama </li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
My Doubt :
When i will click "Kuchipudi" menu, its sub menu will be open. That time "Kuchipudi" background will be change as selected menu.
When i will click "Bharatanatyam" menu, its sub menu will be open. That time "Kuchipudi" background will be change like as previously and "Bharatanatyam" background color will be change as selected menu. I dont know how to change, its background color change.
Would this edit to your fiddle work:
$('.sub_menu').click(function () {
$('a.submenu').removeClass('selected');
$(this).addClass('selected');
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
);
Then add this CSS:
.selected{background-color:#eee; //or whatever colour
I have a slightly complicated menu to code from PSD document and integrate into Wordpress.
This is how it looks:
The result of my work is this:
http://slavisaperisic.com/FlexE/meni_setap.html
Now, when I write function wp_list_pages(); I get the default markup:
<ul>
<li class="page_item"></li>
<li class="page_item"></li>
<li class="page_item"></li>
</ul>
But the markup I created (that gives me the appropriately styled dynamic menu) looks like this:
<div id="menu">
<div id="menu-left"></div>
<div id="main-menu">
<ul>
<li class="active first">
<div class="left_li"></div>
Exploring
<div class="right_li"></div>
</li>
<li class="second">
<div class="left_li"></div>
Using
<div class="right_li"></div>
</li>
<li class="third">
<div class="left_li"></div>
Downloading
<div class="right_li"></div>
</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
I styled it so that it follows the length of the word in the menu item. Obviously, I can't use the wp_list_pages() function because the structure it gives me is different than the one I need.
Do you have some ideas? Maybe point me to somewhere where I can learn to code it differently or explain it to me?
Try this on for size. I've tested it in Chrome and Firefox.
Mark-up:
<ul>
<li class="page_item active"><a>Exploring</a></li>
<li class="page_item"><a>Using</a></li>
<li class="page_item"><a>Downloading</a></li>
</ul>
CSS:
ul, li { margin: 0; padding: 0; list-style: none; }
ul {
float: left;
background-color: #EEE;
border: 2px solid #DDD;
height: 46px;
position: relative;
border-radius: 12px 12px 0 0;
}
ul:after {
display: block;
content: "";
position: absolute;
right: -45px;
top: 3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #DDD transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
border-width: 0 45px 45px 0;
}
li {
float: left;
height: 26px;
font-size: 1.2em;
padding: 10px 10px 10px 40px;
background-color: #EEE;
border-radius: 10px 10px 0 0;
position: relative;
}
li:after {
display: block;
z-index: 1;
position: absolute;
right: -40px;
top: 4px;
width: 0;
height: 0;
content: "";
border-style: solid;
border-color: transparent transparent #EEE transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}
You can see it in action here:
http://static.robinwinslow.co.uk/menustyling.html
I can't test in IE on this Ubuntu machine, but I think:
IE9 should be fine
IE8 should show triangles but not border radii
IE7 won't show triangles or border radii
Is that a good enough solution?
You can use wp_nav_menu to create custom menus. Details can be http://codex.wordpress.org/Function_Reference/wp_nav_menu
Using this you can create markup similar to:
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
<a href="http://sewsoon.co.uk/">
<strong>Home</strong>
<span>Start Over</span>
</a>
</li>
However, you may want to look into using pseudo elements before: and after: to keep the markup more semantic. Depending upon if you're including javascript libraries or not you could use http://selectivizr.com/ to patch ie support.