I'm trying to Validate to HTML5 standards and have 1 error left which I can't get passed.
"Element section not allowed as child of element ul in this context." is the error, which I've found covered below and I know is a no-no. It works perfectly, it just doesn't validate.
Allowed child elements of ul
My question is how to I get around it? I'm trying to get a .js button to work within a Nav bar. I've tried every way I can think of to nest it and no luck. Either I lose the .css and it looks like a standard button and/or lose my positioning.
Here's the code. Thanks a lot!
<ul class="navlinks">
<section>
<li>link1</li>
<li>link2</li>
<li><button id="contactpanel">Contact</button></li>
</section></ul>
.navlinks {
border-left:orange solid 1px;
margin-left:6%;
margin-top:10%;
z-index: 6;
position:fixed;
font-size:1.1em;
font-family: 'Lato', sans-serif;
color:#18112D;
list-style:none;
font-weight:500;
padding-left:6px;
padding-top:20px;
padding-bottom:20px;
}
.navlinks > section {
outline: none;
}
.navlinks > section button {
border: none;
display: block;
width:100%;
cursor: pointer;
z-index:6;
font-size:1em;
font-family: 'Lato', sans-serif;
color:#18112D;
font-weight:500;
margin-left:-7px;
outline: none;
background-color:transparent;
}
.navlinks > section button:hover {
color:#514966;
opacity:0.3;
color:#18112D;
height:auto;
}
.navlinks > section button.active {
background-color: orange;
opacity:1;
color:white;
outline: none;
padding-right:18px;
}
Try getting rid of the <section> and targeting the button with this selector .navlinks li > button. See example codepen.
Just get rid of the <section> tags all together (or wrap the whole <ul> in it). It's not doing anything for you here anyway.
Then change .navlinks > section button to .navlinks button
Related
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>
Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you
Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}
Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.
Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.
When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker
Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}
I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.
I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".
Simple Div Structure:
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??
Like:
$("#menu").hover( // Div Menu is being hovered
function () {
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
},
function () {
$el..hide();
}
);
Or maybe my structure is completely wrong, Should use another method to do this? Please help.
$("#menu").hover( // Div Menu is being hovered
function (event) {
$el = $(event.target);
$el.show();
},
function (event) {
$el = $(event.target);
$el.hide();
}
);
Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.
This means you have to bind the handler to every single element in the menu tree:
$("#menu div").hover(
function (event) {
console.log(event);
$(this).children().show();
},
function (event) {
$(this).children().hide();
}
);
Demo at jsfiddle.net
Yes you could use the code you wrote for determining when you hover a div. Then you trigger a function for displaying the dropdown menu. When you define the css of the navigation bar you should set the part that doesn't have to be visible at the beginning to display:hidden; in the div, so it's hidden. Then through jquery you inject code into the css for changing the property display. I give you an example. Let's assume you create a div called "hidden" and set this in the css among other possible styles:
#hidden {
display:hidden
}
Then you want the part with id "hidden" to appear when you hover the mouse.
You can use:
$("#hidden").hover.css('display', 'block')
so the hidden part will appear.
Anyway you can create a dropdown menu even simply by using css only without jquery.
Here i give you an example:
Let's say you have this markup in the html file
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
<li>Sevice three</li>
<li>Sevice four</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
<li>Small product (three)</li>
<li>Small product (four)</li>
<li>Big product (five)</li>
<li>Big product (six)</li>
<li>Big product (seven)</li>
<li>Big product (eight)</li>
<li>Enourmous product (nine)</li>
<li>Enourmous product (ten)</li>
<li>Enourmous product (eleven)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
As you can see here the markup is simply a series of nested "ul". No verbose IDs/classes, no divs, just rich, semantic code.
The #nav ul contains a series of li, and any that require a dropdown then contain another ul. Notice the dropdown ul have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
Now the CSS:
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
So by using a nested unordered list and some css you can make an effective dropdown menu. That is the best solution according to me. Because the easier way you can make a thing the better it is.
For more details and a full explaination and demo of the dropdown menu, go to: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Of course you can set the colors and style as you prefer.
If you want a flyout vertical menu like that on Amazon check this example. It's simple, just html and css, no jquery. It looks alike.
HTML:
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>
CSS:
ul.nav{
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
}
ul.nav li{
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
}
ul.nav > li:hover{
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
}
ul.nav > li:hover > span{
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
}
ul.nav li a{
color: #666;
text-decoration: none;
}
ul.nav li a strong{
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
}
/* dropdown */
ul.nav li ul{
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
}
ul.nav li:hover > ul{
display: block;
}
ul.nav li ul li{
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
}
ul.nav li ul li a strong{
font-weight: normal;
color: #034995;
}
Look at the code and demo here: http://jsfiddle.net/blackpla9ue/KHLgm/8/
You can edit and add things as you prefer.
I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .
http://www.crystal.ch/abb/power_systems_landscape/
You may notice that there is following issues involved,
Nice hover effect (I badly need this)
Rotation of menu item arrow icon
Also here you see sliding up and down smoothly that is not problem to me.
Any idea or reference would be appreciated. thanks
To start we need the HTML
<p class="menu_head">first</p>
<div class="menu_body">
1
2
3
4
</div>
<p class="menu_head1">Second</p>
<div class="menu_body">
1
</div>
Jquery for the effect
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head1").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head").mouseover(function()
{
$(this).css("text-indent","35px");
$(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css("text-indent","10px");
$(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);
});
I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.
$(this).fadeTo("slow",0.33);
CSS
.menu_head {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_head1 {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_body {
display:none;
}
.menu_body a{
font-family: arial;font-weight: bold;
left:3%;
width: 220px;
height:7px;
text-indent:10px;
position:relative;
padding: 10px 15px;
display:block;
color:#006699;
padding-left:10px;
font-weight:bold;
font-size:10px;
text-decoration:none;
vertical-align: middle;
}
See Example
try to edit the css for it was made to adapt to my site.
Gudluck
Really love the drop down that I found on http://www.scriptiny.com/2008/04/sliding-javascript-dropdown-menu/
I have 4 Menus and when I add this this flows over the logo. The size of each menu is in fact too big. When I tried to alter this the size of sub-menus stay the same and it was looking ugly. I can't attach screenshot as SO doesnt allow me to.
I basically want the size of the menu box to be smaller;
CSS code is :
body {margin-left:140px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:right; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
I agree with Glenn. Can we have more detail of what you did/tried?
I tested with FireFox 4.01 and FireFox 5.0 with a float:right on the dropdown class and got the results I expected.
EDIT:
++ to Wesley's solution as it's cleaner to wrap outside the dropwdown class...
If you can't figure it out the way it is, put it in a div with float:right
<div class="nav-wrapper">
<!-- Your navigation markup -->
</div>
.nav-wrapper {
float:right;
}