I have a navigation bar at the top of my site, a simple HTML un-ordered list:
<div class="navitemcontainer">
<ul class="navlistul">
<li>Contact</li>
<li>Services</li>
<li>Home</li>
</ul>
</div>
Behind this I have some basic CSS formatting:
.navitemcontainer
{
padding-top: 40px;
padding-right: 10px;
}
.navlistul
{
list-style-type: none;
}
.navitemcontainer li
{
float: right;
opacity: 0.5;
}
.navitemcontainer li~li
{
border-right: 3px ridge #FFF;
}
.navitemcontainer li a
{
text-decoration: none;
color: #FFF;
display: block;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
font-family: 'Allerta Stencil';
}
.navitemcontainer li:active
{
margin-top: 2px;
}
I also have a Javascript function to change the opacity of the links on mouseenter/mouseleave:
function opaquelinkchange()
{
$(".logo, .navlistul li").on
(
{
mouseenter : function()
{
$(this).stop().fadeTo(250, 1);
},
mouseleave : function()
{
$(this).stop().fadeTo(250, 0.5);
}
}
)
}
The issue I have is when the mouse enters the navigation links, it also lights up (sets the opacity) of the CSS property below:
.navitemcontainer li~li
{
border-right: 3px ridge #FFF;
}
I understand that this is correct and there is no fault here, but I would like to have the border-right property remain opaque and not light up upon mouseenter.
Is there any way of excluding this CSS property from the JavaScript code?
I am fairly new to HTML, CSS and JS so please excuse me if this is a stupid question and for the code formatting.
Thanks for any help.
J
Related
I'm having a problem where my list for my dropdown menu appears in another location then expected to be at.
This is part of my code. I've tried multiple references, like YouTube, w3school, and etc.
(HTML / JS)
.dropdownButton {
color: #fe4b4b;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 165%;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.dropdown {
align-items: center;
}
.list {
position: absolute;
align-items: center;
text-align: center;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
height: auto;
width: 150px;
border-radius: 5px;
background-color: #3a4172;
cursor: pointer;
overflow: hidden;
box-shadow: 2px 0px 10px 5px rgba(0, 0, 0, 0.7);
list-style: none;
}
.newlist {
transform: scaleY(1);
}
.links {
color: #ffffff;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 130%;
background-repeat: no-repeat;
background-color: transparent;
border: none;
border-radius: 5px;
width: 100%;
}
.links:hover {
color: #fefb4b;
border-left: 5px solid #fefb4b;
cursor: pointer;
transform: scale(1.025);
}
<header>
<ul>
<li id="regular">EARN</li>
<li id="regular">PROMOCODES</li>
<li id="regular">WITHDRAW</li>
<li class="dropdown">
<button class="dropdownButton" href="#">MORE ▼</button>
<ul class="list">
<button class="links">REFFERALS</button>
<button class="links">DAILY</button>
</ul>
</li>
<li id="login">SIGN UP</li>
</ul>
<script>
//Dropdown
let click = document.querySelector('.dropdownButton');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
//Dropdown End
</script>
</header>
I don't know how to fix it cause I'm a beginner, any help on fixing it / guidance would be nice! Thanks.
We're going to need more CSS and possibly HTML to see exactly why your code is behaving unexpectedly.
Definitely mimicking the first comment on here though: IDs should be unique to each element. If you want those li elements to have the same styling, use a class:
<li class="regular">
This will apply the same styling to different elements.
However, when an element appears in the top left like that, in my experience, I am using the CSS 'display', 'float', or 'position' properties incorrectly. If you haven't already, look into how the float and display properties function (as well as relative vs absolute positioning).
Check out this codepen.io, where I have it working by adding:
li {
float: left;
}
This allows your list items to exist on the same line properly. My guess is that you are using
li {
display: inline; /* incorrect usage */
}
to get them on the same horizontal axis. This is fine for regular text elements, but will cause "unexpected" behavior with positioning of child elements. For a more detailed explanation, please see this StackOverflow post:
What is the purpose of float:left on an unordered list when creating a horizontal navigation bar?.
Tip for next time: if your local looks very different than what you get if you paste into codepen.io, people will be less inclined to help you.
If this properly answered your question please upvote and mark best answer :)
All of my elements hide and show correctly using slidetoggle(), EXCEPT for my li:before. I've tried forcing the overflow, visibility, display, etc on the :before and the li, and nothing is helping, it still shows the bullets set using the :before class. What needs to happen to hide these bullets when slidetoggle() is activated/deactivated?
jQuery(document).ready(function($) {
$("#read-more").click(function(){
$(".careers-position").slideToggle(800);
return false;
});
});
ul {
line-height: 2.4em !important;
margin-left: 20px;
padding: 0 0 23px 1em;
}
li {
list-style: none !important;
color: #656565;
}
li:before {
content: "";
background: #9e9e9e;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 18px;
margin-top: 16px;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
}
.careers-position {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
<h3>Pilot</h3>
Position information will go here.
We are an equal opportunity employer and all qualified applicants will receive consideration for employment.
<strong>Requirements:</strong>
<ul>
<li>Multi Commercial (ATP preferred)</li>
<li>First Class Medical</li>
<li>Passport</li>
<li>90 day currency</li>
<li>Clean FAA record</li>
</ul>
</div>
<div class="careers-read-more">
<a class="quick-btn" id="read-more" href="#">Read More</a>
</div>
Add position relative:
.careers-position {
display: none;
position: relative;
}
Demo
Here look at this fiddle https://jsfiddle.net/wfccp58p/4/
ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}
I removed the li:before and added the list-style-type to the ui. Not sure if you still wanted some of the LI:Before pseudo stuff, but this fixes your issue.
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!
I have a stack of li's. I'm trying to get the background color of a div to change upon mouse on and change back upon mouse off. I was able to figure out how to do it, but it's buggy. The gaps between the li's cause an issue where the jquery isn't triggered correctly when I hover from one li to another.
Here's my code: http://jsfiddle.net/blutuu/k93o28rf/8/
It's quite hacky, so I'm hoping for a better implementation. Thanks for your help.
I'm stacking on top of both answers above. I did a little rearranging of the code and I think I finally got what you are looking for. I tucked the <li> tag inside of the <a> tags, at which point the entire element even when a border is added became clicable.
$(document).ready(function() {
$('li').mouseenter(function() {
var color = $(this).data('color');
$('#mbg').css('background-color', color);
});
$('li').mouseout(function() {
$('#mbg').css('background-color', 'blue');
});
});
.resources {
width: 17%;
height: 100vh;
overflow: hidden;
position: absolute;
z-index: 1;
border-right: solid 1px #C5C5C5;
box-shadow: 2px 0px 2px -1px #DCDCDC;
}
.resources ul {
text-align: right;
padding: 0;
margin: auto 0;
}
.resources ul > li a {
list-style-type: none;
height: 65px;
background: #00ADEF;
border-bottom: solid #0088BC 1px;
vertical-align: middle;
overflow: hidden;
padding: 0;
box-shadow: 0px -1px 5px -2px #222 inset;
box-sizing: border-box;
transition: .5s;
}
.resources ul li a:hover {
border-right: 25px solid #8CC63E;
vertical-align: middle;
overflow: hidden;
/*transition: .5s;*/
}
.resources li a {
line-height: 1em;
text-decoration: none;
color: white;
font-size: 20px;
font-weight: bold;
display: block;
padding: 1.13em;
}
#mbg {
position: absolute;
background-color: blue;
width: 100%;
height: 100vh;
margin-left: 17%;
}
#layoutsTable {
border: solid 1px #f08721;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mbody">
<div class="resources">
<ul>
<a href="#">
<li data-color="#380606">Policies</a>
</li>
<a href="#">
<li data-color="#191919">LMS</a>
</li>
<a href="#">
<li data-color="#cbcbcb">Tips & Tricks</a>
</li>
<li data-color="#f08721">Forms
</li>
</ul>
</div>
<div id="mbg"></div>
</div>
Demo: http://jsfiddle.net/k93o28rf/6/
Use of bind to pass params directly to the changeColor function.
Define a changeColor function so you don't have to define costly vars everytime.
And simply call .css function on your div id to set background-color.
$(document).ready(function() {
var content = $('#mbg');
var changeColor = function(color) {
content.css('background-color', color);
}
$('li').eq(0).hover(
changeColor.bind(null, '#380606')
);
$('li').eq(1).hover(
changeColor.bind(null, '#191919')
);
$('li').eq(2).hover(
changeColor.bind(null, '#191919')
);
$('li').eq(3).hover(
changeColor.bind(null, '#f08721')
);
$('li').mouseout(
changeColor.bind(null, 'blue')
);
});
demo: http://jsfiddle.net/k93o28rf/3/
by using data tag attributes on each of the li elements, you can just have one mouseenter function and one mouseout function to handle the background color changes as shown below.
<div id="mbody">
<div class="resources">
<ul>
<li data-color="#380606">Policies</li>
<li data-color="#191919">LMS</li>
<li data-color="#cbcbcb">Tips & Tricks</li>
<li data-color="#f08721">Forms</li>
</ul>
</div>
<div id="mbg"></div>
</div>
$(document).ready(function() {
$('li').mouseenter(function() {
var color = $(this).data('color');
$('#mbg').css('background-color', color);
});
$('li').mouseout(function() {
$('#mbg').css('background-color', 'blue');
});
});
UPDATE:
Try using linear-gradient instead of border-right on your a elements:
http://jsfiddle.net/em96edb0/
The problem is the border you've applied to the bottom. Add this to your a element in CSS:
box-sizing:conteny-box;
And that should fix it. Also, to be more efficient, use JQuery's .each function. Something like this:
$('li').each( ///your code );
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}