Develop Reference

Mouse Over Text To Display Image On A Fixed Location

I am new to HTML, CSS, and Javascript. For some time I have been looking to design my website the same as Harvard school of design but after a lot of search over the internet, I can only find this result change links with images
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});
$('#thumbs3 a').hover(function(){
$('#largeImage3').attr('src',this.getAttribute('data-swap'));
});
#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
//WITH IMAGE LINKS </br><hr></br>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="http://placehold.it/100" />
<div id="description">main image with image links</div>
</div>
<div id="thumbs">
<img src="http://placehold.it/100/ee55ee" alt="1st image description" />
<img src="http://placehold.it/100/080" alt="2nd image description" />
<img src="http://placehold.it/100/ff6" alt="3rd image description" />
<img src="http://placehold.it/100/ff3322" alt="4th image description" />
</div>
</div>
</br><hr></br>
//WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
</br><hr></br>
//WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3">
<div id="panel">
<img id="largeImage3" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs3">
<a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
which is not much desired. The result which I got on this website is really I am looking forward to the time being. Being new to front-end technologies facing a hard time achieving this goal. I would really appreciate getting help.

Having looked at the code referenced in the question, I wonder whether something a bit simpler would suffice.
In particular, there doesn't really seem to be a need for jquery and it's probably useful to get a basic understanding of 'raw' Javascript before taking on a library.
This snippet has very minimal styling deliberately, just to show the basic JS.
UPDATE To make the transition to the hovered element smoother all images are loaded to begin with. They are stored in the bigImage element so it will be possible to show them offset and transition them in and out as desired using CSS. This code is just the basic stuff needed to show an image on a hover event.
<!-- begin snippet: js hide: false console: true babel: false -->
#container div.bigImage {
display: inline-block;
}
.bigImage img {
display: none;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
.bigImage img.show {
display: block;
}
<div id="container">
<ul id="ul">
<li>Pic 1</li>
<li>Pic 2</li>
<li>Pic 3</li>
<li>Pic 4</li>
</ul>
<div class="bigImage">
<img src="https://picsum.photos/id/1/300/300.jpg" class="show">
<img src="https://picsum.photos/id/2/300/300.jpg">
<img src="https://picsum.photos/id/3/300/300.jpg">
<img src="https://picsum.photos/id/4/300/300.jpg">
</div>
</div>
const bigImage = document.querySelector("#container div.bigImage"); //get the bigImage element
const img = bigImage.querySelector("img"); // get the img element within it
const textdiv = bigImage.querySelector("div.text"); //get the div which holds the text
const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
// listen for mouseover event on the li elements
for (var i=0; i<lis.length; i++) {
lis[i].addEventListener('mouseover', function() {
// on an event this will refer to the element that witnessed that event
img.src = this.getAttribute("data-src");
textdiv.innerHTML = this.getAttribute("data-text");
}
);
}
// initialise the bigImage with the image and text from the first list element
bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");
#container div.bigImage {
display: inline-block;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
<div id="container">
<ul>
<li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1">Pic 1</li>
<li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2">Pic 2</li>
<li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3">Pic 3</li>
<li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4">Pic 4</li>
</ul>
<div class="bigImage">
<img src="">
<div class="text">
</div>
</div>

Showing and hiding multi-column-dropdowns

I'm working on a mock site for my web developer portfolio. I don't have much experience with Javascript and JQuery, but I'm trying to figure out the most efficient way to show and hide dropdowns for a nav menu. My JQuery isn't working and I wanted to know if anyone had any tips. Also, I do plan on making dropdowns for all the instruments in the first Ul.
HTML:
<body>
<div class="container-fluid">
<div id="main-page">
<ul id="main-menu">
<li class="main-menu-list-items" style="border: 1px solid black;">
<div class="dropdown">
<ul>
<li>Products</li>
<div id="myDropdown" class="dropdown-content">
<ul>
<li class="dropdown-submenu"><a onclick="myClarinetDrop()" class="clarinet-drop" href="#">Clarinet</a>
<div id="my-clarinet-dropdown" class="dropdown-content">
<ul>
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</div><!--closes "myDropdown"-->
</ul>
</div><!--closes dropdown-->
</li>
<li class="main-menu-list-items"style="border: 1px solid black;">
<span>Shop By Brands</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>How To Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>Quick Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>About Us</span>
</li>
</ul><!--closes "main-menu"-->
</div><!--closes "main-page"-->
</div><!--closes "container-fluid"-->
</body>
CSS:
body {
margin:0;
padding:0;
}
.main-menu-list-items {
list-style-type:none;/*removes bullet point*/
float:left;/*puts list items side by side -- with no spaces*/
padding:15px 75px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown >ul {
margin-left:-40px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
position: absolute;
min-width: 1154px;
border:1px solid black;
margin-left:-76px;
margin-top:15px;
height:50px;
list-style-type:none;
}
.dropdown-content > ul {
list-style-type:none;
}
.dropdown-content >ul >li {
position:relative;
float:left;
padding:15px 29px;
}
.dropdown-submenu > div > ul > li {
position:relative;
float:left;
padding:15px 52px 0 30px;
}
.dropdown-submenu > div > ul {
border:1px solid black;
height:50px;
margin-left:-70px;
bottom:-54px;
min-width: 1114px;
position:absolute;
list-style-type:none;
display:none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
JQuery:
$(' .main-menu-list-items > .dropdown').click(function() {
var submenu = $(this).children('.dropdown > ul');
if($('.dropdown-content').css('display') == 'none') {
$(submenu).show();
}
else {
$(submenu).hide();
}
});

If you want to open a single sub-menu, it should be sufficient to add a class. You can then show the child element (.dropdown-content) by adding another CSS rule. If you remove that class, the child node will be hidden again. I have rewritten your code a bit and improved it that purpose:
$('.main-menu-list-items > .dropdown').click(function() {
var $this = $(this); // performance, so we do not have to call $(this) multiple times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});
Then add this to your CSS. This works because you previously have hidden this element within your CSS:
.show .dropdown-content {
display: block;
}
As a side note: remove onclick="myFunction()". You do not have this function defined, so it will only give you errors in the console.

The first thing you might want to fix is your HTML. The only allowed direct descendants of a ul are li, do remove the divs. Also, you have a few instances in your HTML where your closing brackets are in the wrong place, thus creating invalid HTML.
Here's a simple format for a menu, but you'd have to redo your CSS to use it:
<nav>
<ul>
<li class="dropdown">
<a href="#" >Products</a>
<ul class="sub-menu">
<li class="dropdown">
Clarinet
<ul class="sub-menu">
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>
Saxophone
</li>
<li>
Flute
</li>
<li>
Bassoon
</li>
<li>
Recorder
</li>
<li>
Brass
</li>
<li>
Guitar
</li>
<li>
Paino
</li>
<li>
Orchestral
</li>
<li>
Percussion
</li>
</ul>
</li>
<li>
Shop By Brands
</li>
<li>
How to Order
</li>
<li>
Quick Order
</li>
<li>
About Us
</li>
</ul>
</nav>
Then, to show the sub-menu, regardless of how many times it's nested, you could do something like:
$('.dropdown').on('click', function() {
$(this).children('.sub-menu').toggleClass('hideSubMenu');
});

Thank you for all that helped me with this question!!
I completely re-did my HTML because I realized there were tons of errors.
HTML:
<nav>
<ul id="main-bar">
<li class="dropdown">
Product
<!--sub-menu will hold all contents in dropdown --list items-->
<ul id="product-bar" class="sub-menu">
<li>Clarinet</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</ul><!--closes product-bar-->
</li><!--closes product list item that is holding all the products-->
<li>Shop By Brands</li>
<li>How to Order</li>
<li>Quick Order</li>
<li>About Us</li>
</ul><!--closes main-bar-->
</nav>
I re-did my CSS as well:
body {
margin:0;
padding:0;
}
#main-bar {
list-style-type:none;/*removes bullets*/
height:50px;/*sets height of main-bar to same height as li's in #main-bar*/
}
#main-bar > li {
float:left;/*puts list items next to each other*/
border:1px solid black;
padding:15px 80px;
}
#main-bar > li > a {
text-decoration:none;/*removes underline from link*/
}
#product-bar {
position: absolute;
min-width: 1154px
border:1px solid black;
margin-left:-81px;
margin-top:15px;
height:50px;
list-style-type:none;
display:none
}
#product-bar > li {
float:left;
padding:15px 30px;
}
#product-bar > li > a {
text-decoration:none;
}
.show #product-bar {
display:block;
}
And finally, I went with this approach for the JQuery
JQuery:
$('.dropdown').on('click', function() {
var $this = $(this);times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});

Changing Menu Image

I need to change the background-image for a menu button once it is clicked but CSS :active property doesn't work for it, only for while it is being clicked, I need for it to stay as the image until they click it again.
HTML
<nav class="clearfix">
<div class="menu">
<ul style="list-style-type:none;">
<li>
Home
</li>
<li>
About
</li>
<li>
Before/After
</li>
<li>
Facilities
</li>
<li>
Contact
</li>
<li>
Staff
</li>
</ul>
</div>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="testing.js" type="text/javascript">
</script>
</nav>
CSS
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left: -150%;
transform:rotate(-135deg);
position:relative;
}
.menu-trigger:hover{
cursor: pointer;
}
JS
$('a .menu-trigger').on('click', function() {
$('.menu').toggleClass('open', 300, 'easeOutQuad');
});

change button background image on click using jquery-
check Snippet
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu-trigger").toggleClass("open")
})
})
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left:0%;
transform:rotate(-135deg);
position:relative;
cursor:pointer
}
.open{
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>

Why not set the background image for each in a class, then just toggle?
.pre_click {
background-image:url(".../image_1.png");
}
.post_click {
background-image:url(".../image_2.png");
}
Then toggle
$('.menu').on('click', function() {
$('.menu').toggleClass('pre_click post_click')
})
Make sure you set the default class that you want applied to the 'menu' item so it will properly toggle.

Put fixed content to flex slider

Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li):
Flex slider default code:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding.
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>

Use a div outside positioned absolute; You can use css tricks to center.
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>

what would be the simplest / best way of creating a dropdown menu with the following look (has odd borders and needs to be dynamic)

I have the following html
<ul id="header">
<li class="dropdown"><span>Our Locations</span>
<ul>
<li>London</li>
<li>New York</li>
</ul>
</li>
<li class="dropdown"><span>Language Selector</span>
<ul>
<li>English</li>
<li>German</li>
<li>French</li>
<li>Chinese</li>
<li>Mandarin</li>
</ul>
</li>
</ul>
And am trying to get a menu which looks the following way
The difficulty the odd shape of the background and the fact that the text will change with translations of the site.
At present I have the following javascript
(function ($) {
$.fn.dropDownMenu = function () {
$.each(this, function () {
var li = $(this);
li.hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}, function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
});
}
$(function () {
$(".dropdown").dropDownMenu();
});
})(jQuery);
The only way I can see possibly working is absolutely positioning the inner ul (contained by the li.dropdown) which will give me a box, z-indexing the parent li on top using left/right/top borders to get the join of the two boxes and then maybe adding an extra div to cover any overlap parent li. Am wondering if there is a better way?

Try this... it took a little while to figure out, and I haven't tested it for cross browser, but it works on IE 9. will probably need tweaking.
I added a div with a high z-index to mask part of the top border for the nested <ul>
CSS:
#header {
margin:0;
padding:6px 0 5px 0;
background-color:#FFFFFF;
list-style-type:none;
}
li.dropdown {
position:relative;
display:inline;
margin:0;
padding:0;
}
div.borderMask {
position:absolute;
display:none;
background-color:#FFFFFF;
padding:1px;
height:1px;
line-height:1px;
right:0px;
left:0px;
top:13px;
z-index:1000;
}
li.dropdown ul {
position:absolute;
display:none;
background-color:#FFFFFF;
border:solid 1px #CCCCCC;
width:150px;
right:-1px;
top:13px;
}
li.dropdown:hover {
background-color:#FFFFFF;
border-top:solid 1px #CCCCCC;
border-left:solid 1px #CCCCCC;
border-right:solid 1px #CCCCCC;
}
li.dropdown:hover ul {
display:inline;
}
li.dropdown:hover div.borderMask {
display:block;
}
HTML:
<ul id="header">
<li class="dropdown"><span>Our Locations</span>
<div class="borderMask"></div>
<ul>
<li>London</li>
<li>New York</li>
</ul>
</li>
<li class="dropdown"><span>Language Selector</span>
<div class="borderMask"></div>
<ul>
<li>English</li>
<li>German</li>
<li>French</li>
<li>Chinese</li>
<li>Mandarin</li>
</ul>
</li>
</ul>