It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
When you hover on it a box opens.Now here comes the problem,i want the position of the box to be fixed at one place so whenever you hover on the menu the box remains at the same place.I hope you guys understood me and one more thing when somebody opens my webpage i want the first list item of the menu to be selected by default.
Here is my CSS:
#cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
#cssmenu ul {
display: block;
position: absolute;
width: 150px;
top: 500px;
left: 900px;
}
#cssmenu ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}
#cssmenu ul li a {
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #fff;
border-bottom: 1px dotted #d9d9d9;
padding: 11px 20px;
width: 150px;
font-family: Helvetica, Arial, sans-serif;
color: #3dafea;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
font-weight: 300;
background: #eaeaea;
}
#cssmenu ul li a:hover, #cssmenu ul li:hover a {
color: #fff;
background: #54cdf1;
background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
border-color: transparent;
}
#cssmenu ul .has-sub a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #3dafea;
}
#cssmenu ul .has-sub a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::after, #cssmenu ul li:hover a::after {
border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::before, #cssmenu ul li:hover a::before {
border-left: 4px solid rgba(0, 0, 0, .25);
}
#cssmenu ul ul {
position: absolute;
left: 190px;
top: -9999px;
padding-left: 5px;
opacity: 0;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}
#cssmenu ul li:hover ul {
top: 0px;
opacity: 1;
}
div.box {
background: yellow;
width: 200px;
height: 200px;
position: absolute;
}
And here is the HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='index.html'>Darksider II</a>
<ul>
<li class='has-sub'>
<div class="box"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>FIFA 13</a>
<ul>
<li class='has-sub'><div class='box'><img src='1.jpg' width='100' height='100'>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Absolution</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Blood money</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>Darksiders</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></div></li>
</ul>
</li>
</ul>
</div>
Any answer in any Language will be really appericiated and thanks in advance
This can be achieved by assigning "inline-style" to your individual "box" elements, other than the first one. I gave them a -ve top-margin.
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='index.html'>Darksider II</a>
<ul>
<li class='has-sub'>
<div class="box"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>FIFA 13</a>
<ul>
<li class='has-sub'><div class='box' style="margin-top: -38px"><img src='1.jpg' width='100' height='100'>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Absolution</a>
<ul>
<li><div class='box' style="margin-top: -74px"><img src='1.jpg' width='100' height='100'></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Blood money</a>
<ul>
<li><div class='box' style="margin-top: -112px"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>Darksiders</a>
<ul>
<li>
<div class='box' style="margin-top: -148px"><img src='1.jpg' width='100' height='100'></div></li>
</ul>
</li>
</ul>
</div>
Here is the working demo.
In this brick remove "position: relative" and it'll work like I believe you want it to. In my opinion your code seems to be really rough, some of your li tags don't have end tags while some do for example. I also think a lot of what you're trying to do can be achieved easier and cleaner with JavaScript and jQuery.
#cssmenu ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}
Related
I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
I'm trying to create a nested sidebar menu for mobile.
When I click on the span.big I want the next ul to become visible.
So I call .next().
Now the nested ul does show, however the problem is that the li below the doesn't move down under it, meaning that the ul is overlapping the li.
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
How can i make the li move down correctly?
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu li {
height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 50px;
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>
The height of the li is restricted so the submenu can't display properly.
Plus you aren't selecting anything with the JQuery next statement.
As mentioned in the comments, if a height is required for the li, you can substitute min-height for height.
$(document).ready(function() {
$('.big').click(function() {
$(this).next('ul').slideToggle();
});
});
* {
margin: 0;
box-sizing: border-box;
}
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu >ul > li {
min-height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
height: 50px;
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>
in jQuery, next() is just used to select the next sibling of an element.
That means your javascript code isn't doing anything as you're not using the result of next()
jsFiddle : https://jsfiddle.net/6yesewh9/
the fix was changing your li css height to min-height
#cssmenu li{
min-height:50px;
}
Also I changed your .next to use .siblings` in your jQuery code
I'm currently working on a website. I wanted to make it easier to people with disabilities to use. My boss is blind but he uses the program "JAWS" to navigate through things on his computer. What I'm trying to do is when he does on this website, he can press "tab" and the "hover menu" pops open.
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
color: white;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<nav class="menu">
<ul class="nav nav-pills" class="clearfix">
<li class="active"><a>Home</a>
</li>
<li>About<span class="arrow">▼</span>
<ul class="sub-menu">
<li><a align="left" href="#">About the Center</a>
</li>
<li>Membership
</li>
<li>History
</li>
<li>Mission
</li>
<li>Event Calendar
</li>
<li> News
</li>
</ul>
</li>
</ul>
</nav>
And this is what I tried to do.
if (window.addEventListener) {
var keys = "16";
window.addEventListener("keydown", function(e) {
keys.push(e.keyCode);
if (keys.toString() >= 0) {
document.getElementById("about").hover();
};
});
};
html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.
You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.
I have a slightly complicated menu to code from PSD document and integrate into Wordpress.
This is how it looks:
The result of my work is this:
http://slavisaperisic.com/FlexE/meni_setap.html
Now, when I write function wp_list_pages(); I get the default markup:
<ul>
<li class="page_item"></li>
<li class="page_item"></li>
<li class="page_item"></li>
</ul>
But the markup I created (that gives me the appropriately styled dynamic menu) looks like this:
<div id="menu">
<div id="menu-left"></div>
<div id="main-menu">
<ul>
<li class="active first">
<div class="left_li"></div>
Exploring
<div class="right_li"></div>
</li>
<li class="second">
<div class="left_li"></div>
Using
<div class="right_li"></div>
</li>
<li class="third">
<div class="left_li"></div>
Downloading
<div class="right_li"></div>
</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
I styled it so that it follows the length of the word in the menu item. Obviously, I can't use the wp_list_pages() function because the structure it gives me is different than the one I need.
Do you have some ideas? Maybe point me to somewhere where I can learn to code it differently or explain it to me?
Try this on for size. I've tested it in Chrome and Firefox.
Mark-up:
<ul>
<li class="page_item active"><a>Exploring</a></li>
<li class="page_item"><a>Using</a></li>
<li class="page_item"><a>Downloading</a></li>
</ul>
CSS:
ul, li { margin: 0; padding: 0; list-style: none; }
ul {
float: left;
background-color: #EEE;
border: 2px solid #DDD;
height: 46px;
position: relative;
border-radius: 12px 12px 0 0;
}
ul:after {
display: block;
content: "";
position: absolute;
right: -45px;
top: 3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #DDD transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
border-width: 0 45px 45px 0;
}
li {
float: left;
height: 26px;
font-size: 1.2em;
padding: 10px 10px 10px 40px;
background-color: #EEE;
border-radius: 10px 10px 0 0;
position: relative;
}
li:after {
display: block;
z-index: 1;
position: absolute;
right: -40px;
top: 4px;
width: 0;
height: 0;
content: "";
border-style: solid;
border-color: transparent transparent #EEE transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}
You can see it in action here:
http://static.robinwinslow.co.uk/menustyling.html
I can't test in IE on this Ubuntu machine, but I think:
IE9 should be fine
IE8 should show triangles but not border radii
IE7 won't show triangles or border radii
Is that a good enough solution?
You can use wp_nav_menu to create custom menus. Details can be http://codex.wordpress.org/Function_Reference/wp_nav_menu
Using this you can create markup similar to:
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
<a href="http://sewsoon.co.uk/">
<strong>Home</strong>
<span>Start Over</span>
</a>
</li>
However, you may want to look into using pseudo elements before: and after: to keep the markup more semantic. Depending upon if you're including javascript libraries or not you could use http://selectivizr.com/ to patch ie support.