how can I create navigation with a sidebar like on https://mailchimp.com/?
the sidebar appears when you hover a navigation link, for example, "products", but you still can see other links from the navigation, click on them, hover, etc. Not sure how to implement this because in my case when I hover a link, a sidebar appears and I can't see the navigation
example
<html>
<head>
<style>
#menu {
width: 100%;
height: 70px;
border: 1px black solid;
}
#submenu {
position: fixed;
top: 0;
bottom: 0;
left: 0;
border: 1px black solid;
width: 500px;
background-color: gray;
z-index: 600;
display: none;
}
.open {
z-index: auto;
display: block !important;
}
.link {
vertical-align: middle;
display: inline-block;
}
.linkOpen {
z-index: 620;
}
</style>
</head>
<body>
<div id="menu">
<a class="link" id="link" href="/" onmouseover="addStyle()" onmouseleave="removeStyle()">link1</a>
<div id="submenu">
<ul>
<li>123</li>
<li>456</li>
</ul>
</div>
<a class="link" href="/">link2</a>
<a class="link" href="/">link3</a>
</div>
<script>
function addStyle() {
var element = document.getElementById("submenu");
element.classList.add("open");
var link = document.getElementById("link");
link.classList.add("linkOpen");
}
function removeStyle() {
var element = document.getElementById("submenu");
element.classList.remove("open");
}
</script>
</body>
</html>
What you're trying to do could be achived by using z-index with a proper element nesting.
Here is a basic example (without animations and some smart element proportion / placement): https://codepen.io/etumyan/pen/eYeXKxg
Related
I'm not a developer but i need something like in my website as image is attached. I want images change if you hover on texts.
Is there any plugin available for wp or easy method to create?
Image: (http://prntscr.com/i7kxqf)
EDIT: Sorry, didn't understood your screen shot at the first time
You will need jQuery hover to do this :
$('li').hover(function(){
$('.image').attr('src', $(this).data('img'));
});
img {
max-width: 200px;
}
ul {
position: absolute;
right: 50px;
top: 0;
list-style: none;
}
li {
padding: 20px;
cursor: pointer;
background: blue;
color: white;
margin: 10px;
}
li:hover {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="image" src="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">
<ul>
<li data-img="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">Img1</li>
<li data-img="https://vignette.wikia.nocookie.net/simpsons/images/6/63/The_Simpsons_Simpsons_FamilyPicture.png/revision/latest?cb=20101023180303">Img2</li>
<li data-img="http://www.premiere.fr/sites/default/files/styles/premiere_article/public/thumbnails/image/simpson_horror_show.jpg">Img2</li>
</ul>
https://www.w3schools.com/jquery/event_hover.asp
I created a css hover menu with only one level.
HTML
<div id="menu">
<ul>
<li id="item1">item1
<div id="content1"> </div>
</li>
<li id="item2">item2
<div id="content2"> </div>
</li>
<li id="item3">item3
<div id="content3"> </div>
</li>
</ul>
</div>
CSS
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#menu {
width: 0%;
padding-left: 16px;
height: 100%;
background-color: red;
}
#menu:hover {
width: 20%;
}
#content1, #content2, #content3 {
width: 300%;
height: 1000%;
margin-left: 100%;
background-color: green;
visibility: hidden;
left:16px;
}
#item1:hover #content1, #item2:hover #content2, #item3:hover #content3 {
visibility: visible;
}
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#item1, #item2, #item3 {
width: 100%;
height: 10%;
display:none;
}
#menu:hover #item1, #menu:hover #item2, #menu:hover #item3 {
display:block;
}
http://jsfiddle.net/6Bv6C/12/
The menu is hidden at first but will show when you hover over it. The content boxes will show, wenn you hover over the menu items. My problem is: I would like all the content boxes (green background) to show at the same position (top:0 relative to body; left:/width of #menu/) and not relative to their parents (#item1,2,3). All elements should maintain dynamic width and height.
Is this possible with css? If not could I use jquery or js?
Cheers!
I used position:absolute to solve your problem. An absolutely positioned item calculates its' point of reference as the closest parent with the position:relative style. I updated your fiddle with the changes so you can see what I mean: http://jsfiddle.net/6Bv6C/13/
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
For some reason, I am getting a weird overlapping dropdown menu glitch. It works fine when I open it with Firefox, but when I publish the HTML onto Blogger.com website, it overlaps.
My website I am updating it to is http://clubpenguinspin.com/, as you can see, when you mouseover "Chat", it has so many choices and weird overlapping menus. Heres a picture of it:
http://prntscr.com/aopk4
Take a look at my HTML:
<center>
<!-- Link to styles used for our Navigation Bar -->
<link href="http://cpspintest123.x10.mx/nav-id-19fnroex/tea.css" rel="stylesheet" type="text/css" />
<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="http://cpspintest123.x10.mx/nav-id-19fnroex/SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>
<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
to avoid leaving a gap between each menu title and the next one. -->
<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
to go to when the given menu title is clicked. For example, the first link below
is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->
<div class="mynavbar">
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home<a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat<a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter<a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras<a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
<!-- Products sub-menu, shown as needed -->
<div class="submenu" id="products_submenu"
onmouseover="ShowItem('products_submenu');"
onmouseout="HideItem('products_submenu');">
<div class="submenubox">
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div class="submenu" id="services_submenu"
onmouseover="ShowItem('services_submenu');"
onmouseout="HideItem('services_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone Chat</li>
<li>NoeExclusives Chat</li>
<li>TheCpWorld Chat</li>
</ul>
</div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div class="submenu" id="funstuff_submenu"
onmouseover="ShowItem('funstuff_submenu');"
onmouseout="HideItem('funstuff_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone</li>
<li>444ppenguin</li>
<li>Noe231</li>
<li>Rich Nich</li>
<li>Master Swamp</li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div class="submenu" id="aboutus_submenu"
onmouseover="ShowItem('aboutus_submenu');"
onmouseout="HideItem('aboutus_submenu');">
<div class="submenubox">
<ul>
<li>Freebies</li>
<li>Graphics Store</li>
<li>Club Penguin Cheats</li>
<li>Fun</li>
<li>More coming soon!</li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div class="submenu" id="contact_submenu"
onmouseover="ShowItem('contact_submenu');"
onmouseout="HideItem('contact_submenu');">
<div class="submenubox">
<ul>
<li>Banners</li>
<li>Contact Us</li>
<li>More</li>
</ul>
</div>
</div>
<div class="submenu" id="yeaman_submenu"
onmouseover="ShowItem('yeaman_submenu');"
onmouseout="HideItem('yeaman_submenu');">
<div class="submenubox">
<ul>
</ul>
</div>
</div><!-- end of sub-meus -->
</a></a></a></a></a></div>
</center>
Here is my CSS:
.mynavbar {
position: relative;
width: 974px;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #005EFF;
border-bottom: #003cff solid 3px;
border-left: #003cff solid 3px;
border-right: #003cff solid 3px;
}
a.navbartitle {
display: block;
float: left;
color: white;
text-shadow: 1px 1px 3px #000;
outline: 0;
background-color: #005EFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #0241AD;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 120px; }
#t5 { width: 110px; }
#t6 { width: 120px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #0241ad;
border: 1px solid transparent; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
#contact2_submenu { left: 408px; visibility: hidden; }
#yeaman_submenu { left: 517px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #005EFF;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #005EFF;
border-bottom: #003cff solid 1px;
border-left: #003cff solid 1px;
border-right: #003cff solid 1px;
}
ul { position: left; display: block; }
li { position: left; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: transparent;
border-bottom: transparent solid 1px;
}
Please help me! This is very annoying to my website viewers, and others.
:(
You have to add a closing </a> after "Coming Soon" and your other links:
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home</a><a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat</a><a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter</a><a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras</a><a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon</a>
Fortunately, the problem is simple. Add an </a> to the end of your "Coming Soon" link:
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
I'd run a fine tooth comb through that and make sure your HTML is set up properly. Also, considered taking out the JS from the HTML file where possible and making a separate JS file? You'll thank yourself later.
I am trying to create a dropdown menu that when you click it will open up a ul. The thing is I want the "View More" button to always be exactly where it is and the dropdown to open up centered below it.
if you go to the link below you will see what i mean. it opens up exactly like I want it to, but if you close the dropdown by clicking "View More" you will see the header move to the left when i want it to stay exactly where it is
I am building this to be able to be used in many many different locations so "hardcoding" sizes is not an option.
Please help! :)
HTML
<div id="testcontainer">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-340">
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer2">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-350">
<li>Google</li>
<li>THIS IS A TEST FOR WIDER SHIT</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer3">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-container-400">
<li>GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
CSS
#testcontainer {
position: absolute;
top: 20px;
left: 100px;
text-align: center;
}
#testcontainer2 {
position: absolute;
top: 20px;
left: 150px;
text-align: center;
}
#testcontainer3 {
position: absolute;
top: 200px;
left: 500px;
text-align: center;
}
.dropdown-activator-active {
background-color: #000;
color: #fff;
}
.dropdown a {
display: inline-block;
}
.dropdown-activator {
display: inline-block;
border: 1px solid black;
padding: 3px;
}
.dropdown-content {
visibility: hidden;
height: 0;
opacity: 0;
position: relative;
text-align: left;
margin: 0 auto;
border: 1px solid black;
}
.dropdown-content-active {
visibility: visible;
height: auto;
opacity: 1;
}
.dropdown-content ul li {
list-style: none;
}
JQuery
$(function(){
$(".dropdown-activator").click(function() {
$this = $(this);
var current = $this.attr('dropdownContent');
if (!$(current).hasClass('dropdown-content-active')) {
$this.addClass("dropdown-activator-active", 100);
$(current).addClass('dropdown-content-active', 100, function() {
$('html').unbind('click');
$('html').not($this).one('click', function() {
$(current).prev().removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100);
});
});
} else {
$this.removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100)
}
});
});
you can see an example of it here www.chrisworrell.com (temporary)
display: none; removes your element from the document flow, which is why your parent div resizes. On the other hand, visibility: hidden; hides your element while keeping it in the document flow.
What you could do is instead of manipulating the display property of your <ul> element, set visibility: hidden; and height: 0; That way the unexpanded link will continue to use the width of the UL element it is bundled with.
It's kind of hacky, but should get the job done.
In order to manipulate visibility instead of display none with jQuery UI, use .animate({opacity: 1}) for fadeIn() and .animate({opacity: 0}) for fadeOut()