Jsfiddle: http://jsfiddle.net/87YGW/
At present I have to click tab 1 to show content however I want tab 1 content to display automatically upon opening the page.
HTML:
<div id="tab2" class="css-tabs">
<ul class="noint11_menu">
<li id="item-1"> Tab 1
<div>tab conten1
</div>
</li>
<li id="item-2"> Tab 2
<div>
<p>Tab Content 2</p>
</div>
</li>
<li id="item-3"> Tab 3
<div id="notice">
<p>tab content 3 </p>
</div>
</li>
<li id="item-4" title="click for Tab 4"> Tab 4
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
CSS:
.css-tabs {
position: relative;
text-align: left; /* This is only if you want the tab items at the center */
height: auto
}
.css-tabs ul.noint11_menu {
list-style-type: none;
display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
display: block;
float: left;
}
.css-tabs ul.noint11_menu li > a {
color: #EEEEEE;
text-shadow: 1px 1px 1px #000;
font-family: 'MuliLight', Arial, sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
}
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
}
.css-tabs ul.noint11_menu li > div > p {
border: transparent;
padding: 10px;
margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
display: block;
}
I cannot use Javascript, Jquery or iframe
I cannot demo it in the fiddle (because iframe), but if you link to the first tab directly, eg: http://www.yoururl.com/page#item-1, the first tab's content will be visible on page load.
You can test this by putting all your code inside a new blank html file (CSS and markup in their correct places) and saving it as "test.html". Then make another html file inside the same folder with this code:
<html>
<body>
link
</body>
</html>
Save and open the second file and click the link to go to your styled page. Note the first tab's content is visible, and tab switching still works as expected.
Without JS to redirect or to change the window location, I don't believe you can get the same result through CSS alone.
This article explains why it works: The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
edit to add another hacky, but pure CSS "solution":
Make the first tab always visible with #item-1 div {display: block}, and set a background colour on all tabs:
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
left: 0;
color: #ccc;
text-align: left;
padding: 0;
margin-left: 32px;
background: #fff; /* added this */
}
Now the other tabs will hide the first tab when they are selected. demo: http://jsfiddle.net/87YGW/3/
In your CSS add:
#item-1 div {display: block}
Related
I am trying to highlight the "current page" in my navigation menu (with drop-down menus).
The code below did the job when I had simple navigation links (built using the "< a >" HTML tag). I am now upgrading my navigation bar to hold drop-down menus (using "< button >" HTML tags).
I believe I need to take a similar approach and assign an active class to the "current" page but I can't work out how to loop through "< button >" objects in the same way I did for "< a >" objects
How can I dynamically highlight the current page in my navigation bar when using buttons ("< button >") in my navigation bar?
I found a related article on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2 but it doesn't work for my use-case as I'm navigating between different URLs.
A simplified version of my code looks like this:
<div class="navigation">
Home
Page A
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
Food
Exercise
Drinks
</div>
</div>
Page C
Page D
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
Associated CSS:
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}
You would need to add the class active to each page so the when the user is on the home page. your code would be like this.
<a class='active' href="index.html">Home</a>
For page A
<a class='active' href="page_a.html">Page A</a>
I'm trying to create a slideshow for my website, where it doesn't use any timer of a kind because that's what I have right now, but I want the user to be able to use the navigational buttons. I've been trying to google it but everything I come across seems really complex and I can't get a hold of it. So was wondering if anyone here would be willing to explain how I would do that.
Here a picture of the situation is and how I'm gonna use it. It's an overlay.
does you website support bootstrap if its is you can use bootstrap Carousel slider.
you can stop auto slide by setting the property
$('.carousel').carousel({
interval: false
});
USE THIS CODE FOR NAVIGATION PANEL WITH DROP DOWN FUNCTION
body
{
/*background: url (whatever you want to use) no-repeat; */
background-size: cover;
font-family: Arial;
color: white
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li
{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a
{
color: white;
display: block;
}
ul li a:hover
{
background color:green;
}
ul li ul li
{
display: none;
}
ul li:hover ul li
{
display: block;
}
<html>
<link href ='style.css' rel= 'stylesheet' >
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a>First</a></li>
</ul>
</li>
</html>
At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.
Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.
However, I need this not to happen! Here's a screenshot link: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )
Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.
Here's the HTML:
<div class="menu">
<ul class="navigation">
<li>
Section One
<ul class="children">
<li>
Child Item One
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<li>
Section Two
</li>
<li>
Section Three
</li>
<li>
Section Four
</li>
<li>
Section Five
</li>
<li>
Section Six
</li>
</ul>
</div>
And here's the CSS:
.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }
ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }
ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }
ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}
ul.navigation li { float: left; }
ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }
ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }
Any help on this would be great!
Many thanks,
Matt
ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}
If you still can't see them, add height: 5em to ul.navigation
Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.
Have you tried to position:absolute the children?
Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?
I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});
I have this HTML file with some CSS styles, now I am trying to create vertical tabs but when the page loads all the content is being displayed then if I select any particular tab only content of that tab is display but I am just worried when the page. How come all the tab content is being displayed? Below is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Follow me!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
ul.tabs {
margin-top: 20px;
padding: 0;
list-style: none;
height: 32px; /*--Set height of tabs--*/
/*border-bottom: 1px solid #999;
border-left: 1px solid #999;*/
float:left;
}
ul.tabs li a {
text-decoration: none;
color: #000;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.spacing {
margin-left:90px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$("ul.tabs li:first-child a").addClass("active").show(); //Activate first tab
$(".tab_content #link1").css("display", "block"); //Show first tab content
//On Click Event
$("ul.tabs li a").click(function() {
$("ul.tabs li a").removeClass("active"); //Remove any "active" class
$(".tab_content div").css("display","none");
$(this).addClass("active"); //Add "active" class to selected tab
var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="tab_content spacing">
<div id="link1">
<p>Link1</p>
</div>
<div id="link2">
<p>Link2</p>
</div>
<div id="link3">
<p>Link3</p>
</div>
</div>
</body>
</html>
Try adding this to your css:
div.spacing > div {
display: none;
}
This hides all the divs that are children of the div with the class spacing.
Or, for better 'graceful degredation', hide them in your document.ready function:
$('div.spacing > div').hide();
you might want to use :
$(".tab_content div")live(,"ready",function(){
.... hide tabs that are not link1
})
or as your tabs need javascript to work you can hide them at start and show the first one when ready (just don't forget your noscript tag)