How do I highlight my active tab in navigation? I have been trying it different ways for hours but none is working right. I know there are some ways to do it like using active, selected and etc but I just can't get it right. Please help.
Here's the code in my css file, with some settings on the tabs control.
/* Tab Control */
#tabs ul
{
padding: 0px;
margin: 0px;
margin-bottom: 10px;
margin-left: 270px;
list-style-type: none;
}
#tabs ul li
{
display: outline-block;
clear: none;
float: left;
height: 24px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
width: 130px;
color: #6d6e71;
text-decoration: none;
}
#tabs ul li a:hover {
text-decoration: underline;
color: #eb8c00;
}
#tabs #Content_Area
{
margin-left: 270px;
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
And my html code:
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p>This is the text for tab 1.</p>
</div>
<div id="tab2" style="display: none;">
<p>This is the text for tab 2.</p>
</div>
</div>
</div>
if you are not refreshing page on anchors click then you could highlight tabs using jquery
here is code:
$('ul li').click(function(e){
e.preventDefault();
$(this).children().css('color','red');
$(this).siblings().children().css('color','black');
});
and jsFiddle example: http://jsfiddle.net/338qH/
Related
disclaimer: i am new to html and don't know javascript so if possible to do only using html and css.
also not native english and this is my first ever question on stack overflow so thank for your patience.
i have a div containing a list that should not be visible. i have a button that should display the div whenever i click it or hover it.
the problem is:
-if the div is outside the button tag the hover thing doesn't work but the div looks perfect
div with list outside the button tag
-if the div is inside the button tag the hover "function" works but if i move to slowly i can't select any of the items from the list because it seems to me there is a little space between the button and the div; also the div looks weird like this:
div with list inside the button tag
this should be the code:
<style>
.total{
margin-left: 61px;
margin-right: 61px;
height:100vh;
}
.meniu{
position:absolute;
top:0px;
right:0px;
height:61px;
width:61px;
}
*{
margin:0;
padding:0;
}
.lista-container{
background-color: lightgreen;
width:auto;
height:auto;
position:absolute;
top:61px;
right:15px;
border:solid black 2px;
display:none;
}
ul{
list-style: none;
font-size:20px;
color: black;
line-height: 40px;
}
ul li a{
text-decoration:none;
display:block;
}
ul li a:hover{
background-color:lightblue;
}
.meniu:hover .lista-container{
display:block;
}
</style>
<body>
<div class="total" >
<button class="meniu" >Menu
<div class="lista-container">
<ul>
<li>Arcul de Triumf</li>
<li>Ateneul Roman</li>
<li>Casa Poporului</li>
<li>Muzeul Antipa</li>
</ul>
</div>
</button>
</div>
</body>
been struggling with this for like 2 days thanks.
Since you do nos cripting, you should remove the button which is a trigger to fire a script.
Then you have in CSS no selector to recognize if a button was clicked. A CSS-Solution would be to use a checkbox which can use a pseudo-selector :checked:
#button {
display: none;
}
.total {
margin-left: 61px;
margin-right: 61px;
height: 100vh;
}
.meniu {
border: 1px solid black;
position: absolute;
top: 0px;
right: 0px;
height: 61px;
width: 61px;
}
* {
margin: 0;
padding: 0;
}
.lista-container {
background-color: lightgreen;
width: min-content;
white-space: nowrap;
height: auto;
position: absolute;
top: 61px;
right: 15px;
border: solid black 2px;
display: none;
}
ul {
list-style: none;
font-size: 20px;
color: black;
line-height: 40px;
}
ul li a {
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: lightblue;
}
.meniu:hover .lista-container,
#button:checked + .meniu > .lista-container {
display: block;
}
<div class="total">
<input type="checkbox" id="button">
<label for="button" class="meniu">Menu
<div class="lista-container">
<ul>
<li>Arcul de Triumf</li>
<li>Ateneul Roman</li>
<li>Casa Poporului</li>
<li>Muzeul Antipa</li>
</ul>
</div>
</label>
</div>
I have recently been using tabindex="1" and :focus with divs to make drop down lists in my menu.
But when these drop down lists are clicked they make my links below collapse on themselves, does anyone know why?
Here is the example https://jsfiddle.net/ugjgng5u/4/
When List 1 is clicked all links below shrink and collapse.
<li class=collapse tabindex="1"><a class=red> List 1 </a>
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>
I thought it was to do with clearing the floats after the div? But didn't seem to help.
Thanks!
If I had to guess, it's because the li is inside the menu and you can't detach it. A work around is to make the div absolute.
https://jsfiddle.net/ugjgng5u/7/
HTML
<div id=container>
<div id=top-bar>
<div class=top-links>
<toplinks>
<ul id=menu>
<li><a>A </a></li>
<li class=collapse tabindex="1">
<a class=red> List 1 </a>
<div class="inside">Content 1....
<br> hi
<br> hi
<br> hi
<br> hi
</div>
</li>
<li> <a> C</a></li>
<li><a>B </a></li>
</ul>
</toplinks>
</div>
</div>
</div>
CSS
#container {
background-color: #fff;
max-width: 350px;
z-index: 1;
position: relative;
}
#top-bar {
display: block;
position: relative;
height: auto;
line-height: 1.7;
font-size: 16px;
font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
color: #808080;
}
.top-links li ul {
display: none;
}
.top-links li ul li {
display: block;
float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
.top-links li > a {
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #999;
text-decoration: none;
}
li.collapse > a {
cursor: pointer;
display: block;
}
li.collapse:focus {
outline: none;
}
li.collapse > div.inside {
display: none;
}
li.collapse:focus div.inside {
display: block;
}
.inside {
z-index: 10;
position: absolute;
top: 40%;
left: 11%;
background: white;
width: 300px;
padding-left: 20px;
border: 1px solid black;
}
You got some odd choices going on in your JSFiddle.
None-the-less, don't float .indside. Not sure why it's being floated to begin with. When you float and item you take it out of the normal document flow an it no longer takes up space like it did prior to floating. This means the parent element will treat it as if wasn't there.
If you're looking to do a fly-out menu then you should use position: absolute; on the dropdown menu and position: relative; on it's containing element.
Basic fly-out menu below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
background-color: #f1f1f1;
}
li {
position: relative;
line-height: 1.5;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
li:hover > ul {
display: block;
}
li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #eee;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two A</li>
<li>Two B</li>
</ul>
</li>
<li>Three</li>
</ul>
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
I am trying to develop a website which contains dropdown menu and in the next division below menu there is a slider division but when mouse is hover on menu the submenu displays and the slider division is shifts down.
So can anyone suggest how I can accomplish the task
The code is as follows
<html>
<head>
<style type="text/css">
#header{
height: 90px;
}
#navigation{
height: 30px;
background-color: #0099FF;
border: 1px solid #0099FF;
border-radius: 10px;
z-index:1000;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
padding-right: 40px;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
ul li a:hover {
background: #00CCFF;
}
li:hover ul {
display: block;
z-index: 1000;
}
li:hover li {
float: none;
}
li:hover a {
background: #00CCFF;
}
li:hover li a:hover {
background: #D2F5FF;
}
#drop-nav li ul li {
border-top: 0px;
}
#clearmenu{
clear: left;
}
#sliderandnews{
height: 300px;
}
#slidermain{
height: 300px;
width: 65%;
float: left;
}
#news{
height: 300px;
width: 33%;
border: 2px solid #F0FFFF;
border-radius: 20px;
float: right;
background-color: #F0FFFF;
}
.clear{
height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
<ul id="drop-nav">
<li>Home</li>
<li>About Us</li>
<li>Academic Programs
<ul>
<li>BBA</li>
<li>BCA</li>
<li>BE</li>
</ul>
</li>
<li>Faculties</li>
<li>Admission</li>
<li>Downloads</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sliderandnews">
<div id="slidermain">
This section is changes its position on mousehover
</div>
<div id="news">
</div>
</div>
</body>
</html>
The problem is that your elements are relative positioned. So, when the submenu appears, all elements below are shifted down. You can add absolute positioning to navigation bar, and determine its displacement from top using the top property in CSS. This allows you to eliminate #header (which has only the role to give a top margin).
#navigation{
position:absolute;
top:90px;
}
Similarly you can do with the #sliderandnews block. Since you've given an absolute positioning to navigation menu, navigation is removed from HTML elements flow inside the page. To compensate this, you have to add a proper top margin to this element.
#sliderandnews{
height: 300px;
margin-top:190px;
}
And here's the final fiddle.