I'm trying to create a link that changes into two links when you hover over the text. You can see something like what I want to do here: https://www.kenzo.com/en/ You can see that the collections link changes into two separate links for men and women when you hover over the link. At the moment I have managed to create a link that separates into two words when hovered over but not into two links.
Here is my HTML code:
<li><span>Collection</span></li>
And here is my CSS code:
#nav-item1:hover span {
display:none;
}
#nav-item1:hover:before {
content: "Men Women";
}
So the text changes which is great, but I haven't quite figured out how to turn the text into two separate links. I'm not sure if I have to use JS for this or not, as my JS knowledge terrible.
Any ideas?
If I understand you right you can try something like this:
li {
list-style: none;
}
li a {
display: none;
margin-left: .3em;
}
li:hover span {
display: none;
}
li:hover a {
display: inline-block;
}
<li>
<span>Collection</span>
Man
Women
</li>
Okay so here is a small breakdown of how you can achieve this.
There is a block element on the top of things.
Then there are two hidden elements that are children of the block element.
And when you hover over the block element the other ones are shown.
You can also hide the child element that contains the text on hover.
.block:hover .hide {
display: inline;
}
.block {
color: black;
font-size: 20px;
}
.hide {
display: none;
}
<div class="block">
<span class="default text">Hover</span>
<a class="hide" href="#">Snowball</a>
<a class="hide" href="#">Kitten</a>
<div>
.splitted {
display: none;
}
.links:hover .one-link {
display: none;
}
.links:hover .splitted {
display: inline;
}
<span class="links">
Collection
Men
Women
</span>
Please try this
#nav-item1{
position: relative;
}
#nav-item1:before,
#nav-item1:after{
display: none;
position: absolute;
top: 100%;
color: #000;
}
#nav-item1:hover:before,
#nav-item1:hover:after{
display: block;
}
#nav-item1:before{
content: 'Men';
right: 50%;
}
#nav-item1:after{
content: 'Women';
left: 50%;
color: green;
}
<ul>
<li><span>Collection</span>
</li>
</ul>
Related
I have my portfolio website in English and translated it in to German with a combination of JSON and Javascript. I have a dropdown menu to pick a language, and once a language is picked a javascript script switches the content of every indicated id with the content of the other language.
I also have a navigation menu which gets underlined when you hover over it and when you click it, it takes you to its respective area on the website. However, the moment the user switches the language, both of these functions do not work anymore i.e the href="#header# as well as nav ul li a:hover::after{} break.
You can mimic this behaviour at alexverheecke.com. Before selecting a language, you can hover over "Home", "About" and it will become underlined and upon clicking, will take you to the section. Once you switch language, this breaks.
I'm assuming this will be a bit time-consuming for someone to look at but I would appreciate any ideas that could help in fixing this.
const jsonDE = {
"_Home": "Startseite",
// ...
}
document.querySelector('#language').addEventListener("change", function() {
if (this.value == "๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG") {
for (let key in jsonEN) {
document.querySelector('#' + key).textContent = jsonEN[key]
}
else if (this.value == "๐ฉ๐ช DE") {
for (let key in jsonDE) {
document.querySelector('#' + key).textContent = jsonDE[key]
}
}
});
nav {
display: flex;
/* so image and links side-by-side */
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li {
display: inline-block;
/* so horizontally aligned */
list-style: none;
margin: 10px 20px;
/* space between links */
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
position: relative;
/* because abolute in :after */
}
nav ul li a::after {
content: '';
width: 0%;
height: 3px;
background: #3a65ed;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.2s;
}
nav ul li a:hover::after {
width: 100%;
}
<nav>
<ul id="sidemenu">
<li id="_Home">Home </li>
<select id="language" class="language">
<option>๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG</option>
<option>๐ฉ๐ช DE</option>
</select>
</ul>
</nav>
If you check your site with the DOM inspector you can see that after you change language the a elements have been removed from within the li of your navigation bar.
I would assume this is because your JSON content holds HTML, yet you're updating the textContent of the element. Change textContent to innerHTML and try again.
Also note that you can simplify the language switching logic by putting the language code as a property within a single object of the JSON. Then you only need one loop to work with every language. Note the use of a value attribute on the option elements to avoid the need to have to cater for the subscript language codes which have been added to the text within the UI of the option.
Below is a working example with both of the above issues corrected:
// mock JSON object...
const translations = {
"DE": {
"_Home": "Startseite"
},
"EN": {
"_Home": "Home"
},
"IT": {
"_Home": "Casa"
}
}
// content switching logic
document.querySelector('#language').addEventListener("change", function() {
for (let key in translations[this.value]) {
document.querySelector('#' + key).innerHTML = translations[this.value][key]
}
});
nav {
display: flex;
/* so image and links side-by-side */
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li {
display: inline-block;
/* so horizontally aligned */
list-style: none;
margin: 10px 20px;
/* space between links */
}
nav ul li a {
/* color: white; removed so white text is visible */
text-decoration: none;
font-size: 18px;
position: relative;
/* because abolute in :after */
}
nav ul li a::after {
content: '';
width: 0%;
height: 3px;
background: #3a65ed;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.2s;
}
nav ul li a:hover::after {
width: 100%;
}
<nav>
<ul id="sidemenu">
<li id="_Home">Home </li>
</ul>
</nav>
<select id="language" class="language">
<option value="EN">๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG</option>
<option value="DE">๐ฉ๐ช DE</option>
<option value="IT">แดตแต IT</option>
</select>
I want to implement the following tiny drop down menu into my project.
Is there anything inherently wrong with my code? I attempted the :hover pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
})
.dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
<img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
</div>
</div>
Codepen: https://codepen.io/HelleFl/pen/KyWYYX
Although there are several posts describing how to create a dropdown menu using just HTML and CSS, I'll try to answer your question.
tl;dr: Use CSS over JS for better performance
CSS or JS? Which one is better?
Basically whenever possible, use CSS over JS. There is a great SO answer about this here.
Going further, CSS animations should be preferred over JS animations unless the animation should have some advanced effects. There is a good google developers blog post on this as well.
How to create a dropdown menu
You can find the answer here. Basically you need to set the :hover onto the parent element, that holds both the link and submenu.
li img {
width: 120px;
height: auto;
}
ul > li {
display: inline;
position: relative;
min-width: 150px;
}
/* hide submenus by setting the max-height to 0 */
ul > li > ul {
max-height: 0;
overflow: hidden;
transition: max-height .75s ease;
}
/* set max-height to an approximate height it could have */
ul > li:hover > ul {
max-height: 300px;
}
ul.submenu {
background: #eee;
position: absolute;
left: 0;
top: 1em;
}
ul.submenu > li {
display: block;
}
<nav>
<ul>
<li>Hyperlink 1</li>
<li>
Hyperlink 2
<ul class="submenu">
<li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
<li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
<li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
</ul>
</li>
</ul>
</nav>
I guess you was facing the same issue that I was facing when I checked your codepen, since the .dropbtn are in the same level as .dropdown-content, the selector .dropbtn:hover .dropdown-content wont work since its searching for a child inside .dropbtn, so you have to use the sibling selector:
.dropbtn:hover ~ .dropdown-content{
visibility: visible
}
(CSS animation its better than Javascript)
Also, a good practice in Javascript is to save the DOM element into an variable if you will use it multiple times, so you dont have to search for the DOM element again:
var dropBtnDOM = document.querySelector('.dropbtn');
var dropdownContentDom = document.querySelector('.dropdown-content');
dropBtnDOM.addEventListener('mouseenter', function(){
dropdownContentDom.style.visibility = 'visible'
})
dropBtnDOM.addEventListener('mouseleave', function(){
dropdownContentDom.style.visibility = 'hidden'
})
.dropdown:hover .dropbtn ~ .dropdown-content{
visibility: visible
}
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.
hope my question is clear
On pressing on the unique button i have on this page, i want to display the menu having three elements only.
the "Languages" item menu wraps a submenu that i want to display only if the user clicks on "Languages"
however for the moment whenever i click on the button, not only the menu appears but also the submenu; and that is not what i want to have.
can you please inform me what is wrong with my code please?
enter image description here
Code:
function myFunction2() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction3() {
document.getElementById("languageslist").classList.toggle("show");
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
border: 1px solid black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownb {
position: relative;
display: inline-block;
}
.show {
display: block;
}
<div class="dropdown">
<button id="btn" onclick="myFunction2()">Show</button>
<div id="myDropdown" class="dropdown-content">
<p>Countries</p>
<p id="btnl" onclick="myFunction3()">Languages</p>
<div id="languageslist">
English
Spanish
German
</div>
<p>Continents</p>
</div>
</div>
This is because you are not hiding the submenu at initial stage.
Add a class to languagelist & hide it. On click of it toggle the class
HTML
<div id = "languageslist" class="hide"> // add a class here
English
Spanish
German
</div>
JS
function myFunction3() {
document.getElementById("languageslist").classList.toggle("hide");
document.getElementById("languageslist").classList.toggle("show");
}
JSFIDDLE
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}