Currently im using <li> to display href link, the problem is when i click on the so called 'box'it wont direct link to another page, i have to click on href link it will just link to another page. How can i make it like whenever i click on box / href link it will direct link to another page?
My current progress : Fiddle Demo
Any help will be appreciated.
You can't make an <li> act like an <a>, but you can match their sizes.
Updated Fiddle
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:170px;
}
#colOne ul li a
{
padding: 4px 10px;
display: block;
}
By making the link a block element and moving the padding to it, instead of its wrapper, it will be exactly the same size as the <li>
You should be adding the padding to the anchor elements (<a>) instead of the list items <li>. This effectively increases the area of the link itself, instead of the area around the link.
First, get rid of the padding for the list item (the attributes I commented out):
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:150px;
}
li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
/*position: relative; */
/*display:block; */
text-align: center;
font-weight:bold;
box-shadow: 1px 3px 3px #000;
background: #7EB427;
cursor: pointer;
transition: all 0.2s;
}
Then, add it to the link:
.bg1 li a {
display: block;
padding: 4px 10px;
}
Updated jsFiddle
Related
I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.
Here is an image of how it looks when window is maximized:
Here is an image when the window is resized:
Here is an image of what I want the page to look and function like:
Issues:
As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
When menuis clicked, I want the nav to dynamically display the other links.
Here is what I have tried so far: https://jsfiddle.net/hudnybux/
Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.
<div id="header-main">
<div id="nav-trigger"><span>Menu</span></div>
<nav id="main-navigation" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
<!--<nav id="nav-mobile"></nav>-->
</div>
Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0.
width: 0;
height: 0;
Edit:
I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp. You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.
https://jsfiddle.net/qnco3x7e/8/
You will need to add another media query
#media all and (max-width: 460px) {
nav#main-navigation li {
display:block;
border-bottom: 1px solid #fafafa;
}
}
You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!
The Strategy
Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
Show everything by default; use display: none only on screen sizes you don't want to show something on.
JSFiddle
$(document).ready(function() {
$("#main-nav-mobile-trigger span").click(function() {
$(this).toggleClass("open");
if ($(this).hasClass("open")) {
$("#main-nav").addClass("open").slideDown(250);
} else {
$("#main-nav").removeClass("open").slideUp(250);
}
});
});
.pageOverlay {
width: 900px;
margin: 0 auto;
}
/******************/
nav {
background-color: #fefefe;
/*NAV COLOUR*/
padding: 10px 0;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
nav ul li a {
color: #a4a4a5;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
padding: 0 2px;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: white;
padding: 10px 20px;
}
/****************************************************************/
/* Menu CSS which pops up when window is resized */
#main-nav-mobile-trigger {
text-align: center;
}
#main-nav-mobile-trigger span {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
text-transform: uppercase;
}
#main-nav-mobile-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #e3e3e3;
border-right: solid 10px transparent;
}
#main-nav-mobile-trigger span:hover {
background-color: #e3e3e3;
}
#main-nav-mobile-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent;
}
#media all and (min-width: 901px) {
#top-nav {
text-align: right;
}
#main-nav {
text-align: left;
}
#main-nav-mobile-trigger {
display: none;
}
}
#media all and (max-width: 900px) {
#main-nav:not(.open) {
display: none;
}
#main-nav ul {
display: block;
}
#main-nav li {
display: block;
border-bottom: solid 1px #e3e3e3;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav a {
padding: 10px 30px;
}
#main-nav a:hover {
background-color: #e3e3e3;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
<nav id="top-nav" role="navigation">
<ul>
<li>Join / Log In</li>
<li>Help</li>
<li>Shop</li>
</ul>
</nav>
<div id="main-nav-mobile-trigger"><span>Menu</span></div>
<nav id="main-nav" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
</div>
<!-- pageOverlay closed-->
The HTML
I removed your container <div>s (#header and #header-main), as they serve no purpose as far as layout is concerned.
There are now only three parts to the header area. In order they are:
#top-nav - Join/Login, Help, Shop
#main-nav-mobile-trigger - MENU button
#main-nav - Stretches, Mobility, Posture
The JavaScript
When the MENU button (#main-nav-mobile-trigger span) is clicked:
Toggle its .open class.
If it has the .open class,
Add #main-nav's .open class.
Otherwise,
Remove #main-nav's .open class.
The CSS
You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation, which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav. Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
For big screen widths (#media all and (min-width: 901px)):
Align #top-nav to the right and #main-nav to the left.
Hide the MENU button.
For small screen widths (#media all and (max-width: 900px)):
If #main-nav doesn't have the .open class, hide it.
Display the menu items in #main-nav horizontally.
I hope this helps you. Best of luck with your future adventures in front-end development!
This is my first time asking anything but I'm stuck and I hope i explain clearly what I'm trying.
I have a nav menu that if a link is clicked it (that choice) moves to the far left spot of the menu. Whatever menu option is clicked and in the far left spot i just want the font larger and the color Orange. The next option that clicked needs to go in the left spot and have its font larger and color Orange while the other options go back to small and white.
I'd also like the remaining menu options to stay in the same order that they start in if they are not the choice in that far left spot. I want my sub-menu's to eventually look and work the same way.
Here is my code:
HTML:
<div>
<ul id="main-top">
<li id="blank"><a href="#" ></a></li>
<li>Projects</li>
<li>Services</li>
<li>Contact</li>
<li>Sign-in</li>
</ul>
</div>
CSS:
body {
background: black;
color: white;
}
#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}
#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}
a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}
a:hover{
color: #FF4500;
}
jQuery:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$('#blank').hide();
});
demo: http://jsfiddle.net/CLTZs/
I've tried just adding a function to alter the css of the first-child, but it targets that blank spot and not what goes into it.
You could addClass within your function
DEMO http://jsfiddle.net/CLTZs/1/
jQuery
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.addClass('firstOpt');
$('#blank').hide();
});
CSS
#main-top li.firstOpt a {
color: #FF4500;
font-size: 25px;
font-weight: bold;
}
Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion #Vector and adding a little bit to get the li's back to original look:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.toggleClass('active');
$this.siblings().removeClass("active");
$('#blank').hide();
});
and adding the class "active" to my CSS:
.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}
Since i have other jquery toggles going on with those menu options, I was able to insert that jquery right into my existing function and it work fine. For some reason it throws off my spacing on the rest of the list, but I'll have to figure that out in my css files.
fiddle: http://jsfiddle.net/CLTZs/2/
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}
Here on my site for the tabs, only the actual text its self is clickable. What I am trying to do is make the entire block clickable.
The class that is being called on my "About Me" tab is "menu-item menu-item-type-custom menu-item-object-custom menu-item-179" and so does the other tabs, they just have a different number for the menu item number.
The CSS that I could find containing the tabs was "current-menu-item".
I've looked at this: how to make the whole block clickable? and looked at: block level clickable area not working correctly
My site: http://travisingram.net/ The CSS code that contained "current-menu-item".
.current-menu-item {
color: #fff !important;
background-color: #3e3f3f !important;
border-radius: 3px;
border: 3px solid #e4b41b;
}
.sf-menu li:hover , /*.sf-menu li.sfHover,*/ .current-menu-item {
color: #fff !important;
background-color: #3e3f3f;
border-radius: 3px;
border: 3px solid #e4b41b;
}
.sf-menu li ul, .current-menu-item, .sf-menu li:hover, .sf-menu li.sfHover {
border: none !important
}
Thanks for trying to help everyone, ut nothing is working..
The reason that the block doesnt act like a link is because it isnt a link. Instead of making the li a rectangle for the user to click on, you should be doing that for the links inside of the li. in your css set your "a" elements to block, and then specify some padding for them. You will be able to click inside their area.
a{ display:block; padding:10px 20px; }
look at this example http://jsfiddle.net/NtPAe/
remove the 10 px padding from .sf-menu li and put it in .sf-menu a
.sf-menu a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px 15px;
text-decoration: none;
}
.sf-menu li {
border: 3px solid #FCC71F;
border-radius: 3px;
float: left;
padding: 0;
position: relative;
text-transform: capitalize;
}
For this you need to use the property line-height. Use this to set the final height of your li elements instead of padding.
First Step : change the padding in your li
.sf-menu li {
padding:0;
Second Step : Add line-height
.sf-menu li {
padding:0;
line-height:30px;
}
the best solution is to remove a.href this is sample from you site:
< li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196">
< a href="http://travisingram.net/visual-c-sharp-tools">My Tools</a>
</li >
change it with this:
<li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196" onclick="window.location.href = 'http://travisingram.net/visual-c-sharp-tools';" >My Tools</li>
CSS
#myMenu ul li {
display: inline;
}
#myMenu ul li a {
background-color:#333333;
text-transform: uppercase;
font-weight: bold;
font-family:"Open Sans", Arial, sans-serif;
font-size:12px;
text-decoration: none;
padding: 1em 2em;
color: #000000;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
}
#myMenu ul li a:hover {
color: #fff;
background-color: #999999;
}
.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
HTML
<div align="right" id="myMenu">
<ul>
<li>Structure</li>
<li id="style">Style</li>
<li>Details</li>
</ul>
JavaScript
$(function () {
$("li:first-child").addClass("selection");
$('li').click(function () {
$('#myMenu li').removeClass('selection');
$(this).addClass('selection');
});
});
I want to add black colour to selected items background, but the above code is not working.
If I remove background-color:#333333 from #myMenu ul li a it works.
There are a couple of issues here.
You have tied your click handler to li so the context will be the li element
Your background color is set on the anchor: #myMenu ul li a initially
Assuming you want .selection to apply to the anchor tag, it has less specificity than the class for the anchor.
Change your code and CSS to:
CSS:
#myMenu ul li a.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
Code:
$(function () {
$("li:first-child").addClass("selection");
// Or move your handler to the anchor rather than the list item
$('li').click(function () {
$('#myMenu li a').removeClass('selection');
$(this).find('a').addClass('selection');
});
});
Demo Fiddle
You are adding the background color via CSS to the <a> element. You are targeting the <li> element with your jQuery. For all you know, the jQuery could be working properly, but you can't see it because the <a> element has a background color.
Try changing the jQuery to target the <a> element instead. Be sure to return false or use preventDefault() when targeting the <a> element.
Also, as a side note, unless you have something else going on which I don't know about, it would be more efficient just hard code the selection class to the first element instead of targeting it with jQuery. Just a tip.
Also to add to Chris's answer...the css for #myMenu ul li a will always outweigh the .selection because it is has more specificity. You will need to add !important to any styles in .selection if you want them to override the styles in #myMenu ul li a
Generally although jQuery does auto selection automatically I personally like to handle it myself, just because then I know my code is "selecting" what I want.
So Like this:
$(function () {
$("li:first-child").addClass("selection");
$('li').each(function(){ //loop all li elements
$(this).click(function () {
$('#myMenu li.selection').removeClass('selection'); //select the li
// with the selection class
$(this).addClass('selection');
});
});
});
But basically an issue I see with how you did it is there is no margin on you anchor, or padding on your li, witch could make the changes to the li invisible.
Used with the following it should tell you if this works
.selection{
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
padding:5px; //change to suit your needs
}