I have coded a horizontal navigation as shown below.
But I am having a hard time trying to code a drop down menu for it.
If someone can help me with coding a plain simple drop down menu below Rentals (highlight in the navigation bar in sea blue), I can improve on that.
Thanks
Here is my current html file:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<ul class="glossymenu">
<li class="separator"><b>Reservations</b></li>
/* Added for the drop down */
<ul class="child">
<li><b>New Reservation</b></li>
<li><b>Search Reservation</b></li>
<li><b>Search Customer</b></li>
<li><b>Search Vehicle</b></li>
</ul>
<li class="separator"><b>Rentals</b></li>
<li class="separator"><b>Tariffs</b></li>
<li class="separator"><b>Fleet</b></li>
<li class="separator"><b>Tools</b></li>
<li class="separator"><b>Reports</b></li>
<li class="separator"><b>System Management</b></li>
</ul>
</body>
Here is my css code:
.glossymenu{
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x;
height: 36px;
list-style: none;
border:solid 1px #CCC;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.glossymenu li a b{
float: left;
display:block;
padding: 0 28px 0 8px;
}
.glossymenu li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat;
background-position: left bottom;;
}
.glossymenu li a:hover b{
color: #fff;
background-image: url(../images/menur_hover_right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.glossymenu li.separator {
background:url(../images/separator.gif) no-repeat;
background-position:right;
padding: 0 5px 0 3.5px;
}
/* Added for the drop down */
.glossymenu .child {
position:absolute;
visibility:hidden;
top:100px;
}
.glossymenu ul li:hover {
visibility:visible;
z-index:9999;
}
Do you want something like
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
Added:
Some css based menus
http://purecssmenu.com/ -- guess you can generate the css
http://cssmenumaker.com/drop_down_css_menu.php
http://sperling.com/examples/menuh/
in your example i can not see where you set on hover the Second-Level to "display:block".
Here is a simple example for CSS-Dropdown-Menu.
HTML:
<ul class="topLevel">
<li>Car
<ul class="secondLevel">
<li>Car1</li>
<li>Car2</li>
<li>Car3</li>
</ul>
</li>
</ul>
CSS:
.secondLevel{display:none;}
.topLevel:hover ul{display:block;}
Related
I'm having some issues with the sliding menu links. Each sliding menu works as intended, but if I try to hover the sliding link in the same horizontal space as the h1 text (the first one, the one that says "PERFIL"), it doesn't work until the cursor leaves the h1 area.
<!doctype html>
<html class="video">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<ul id="menu">
<li id="home">
PERFIL<img src="menu/home.png">
</li>
<li id="3d">
GRAFICA 3D<img src="menu/3d.jpg">
</li>
<li id="3">
AUDIOVISUAL<img src="menu/audio.jpg">
</li>
<li id="4">
FOTOMONTAJE DIGITAL<img src="menu/ps.png">
</li>
<li id="5">
CONTACTO<img src="menu/contact.png">
</li>
</ul>
</div>
<body>
<h1><div id="video">VIDEO</div></h1>
</body>
</html>
.wrapper * {
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
.wrapper ul li {
display:flex;
margin-bottom:10px;
}
.wrapper ul li a {
background:black;
color:white;
padding:5px 10px;
transform: translateX(calc(-100% + 45px));
transition: transform 1s ease;
text-decoration: none;
}
.wrapper img {
max-width:32px;
margin-left:5px;
}
.wrapper ul li a:hover {
background:black;
color:white;
padding:5px 10px;
transform: translateX(0);
}
.wrapper:hover a:focus {
left: 0;
background: none;
}
.video h1 {
font-family: verdana;
color: white;
text-align: right;
margin-right: 5%;
margin-top: -280px;
margin-bottom: 50px;
text-transform: uppercase;
background-position: center;
transform: skewX(-20deg);
transform-origin: top;
}
.video div {
padding: 2%;
display: inline;
border-radius: 15px;
}
#video {
background-color: black;
padding: 1%;
display: inline;
border-radius: 15px;
}
Here's a mockup of the site
(Jfiddle)
It's because the width of the h1 element overlaps the menu. You can change the width of the h1 and it should works as expected.
See updated fiddle
I made a dropdown menu with css and i wanted to activate it by hovering over menu button and it works just fine. But problem is that,when i hover below menu button dropdown menu is activated again ,and i don't want that. Here is my HTML and CSS and every help would be more than appreciate.
PS Sorry if you find some typos english is not my native language.
#charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
margin-top: 5px;
position: relative;
top: 17px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul:hover li {
opacity: 1;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>HOME
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Try this made some css changes to your code. see the overflow hidden changes.
nav ul{
list-style-type:none;
transition:all 0.3s;
max-height:50px;
overflow:hidden;
width:120px;
padding:0px;
}
nav ul li{
height:30px;
width:100px;
padding:10px;
margin-top:5px;
background:teal;
text-align:center;
cursor:pointer;
transition:all 0.3s;
}
nav ul li a{
color:white;
font-family:'segoe ui';
text-decoration:none;
}
nav ul li:hover{
background:yellowgreen;
}
nav ul li:not(:first-child){
opacity:0;
}
nav ul:hover{
max-height:600px;
}
nav ul:hover li{
opacity:1;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
I am adding some pictures to a website I am building for a client, and for some reason some of the pictures underlap other pictures when i change the resolution, and some don't. I am adding all the pictures the same way so I am a little confused as to why some are positioned staticly.
HTML PICTURES
<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Jay Cousins</title>
<link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
<div id="header">
<img id="papa" src="newImages/papaPic.jpg">
<img id ="jaytext" src="newImages/jaycousins.png">
<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
<img id ="commercialtext" src="newImages/commercialtext.png">
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
<ul>
<li class="selected">
home
</li>
<li>
Opportunities
</li>
<li>
Project Management
</li>
<li>
About Jay
</li>
<li>
Community
</li>
<li>
Contact
</li>
</ul>
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px; //
}
#jaytext{
position: absolute;
top:5.5%;
left:31.7%;
}
#darkTextBackground{
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
height:57px;
width:550px;
position:absolute;
top:23.5%;
left:29.0%;
}
#leftsidebackground{
width:300px;
height:523px;
position:absolute;
left:0%;
}
#text{
position:absolute;
top:0%;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
overflow: hidden;
padding: 0 0 0px 1px;
width: 970px;
position:relative;
left:5%;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
If you have fixed number of images here then wrap them in a div and set the div following properties div {-webkit-column-count: 5; /* Chrome, Safari, Opera /-moz-column-count: 5; / Firefox */column-count: 5;}
I have two links that are a part of my navigation bar that have drop downs. What I would like is a background image for each drop down;an image for fairies, a different image for craniums. I'm pretty close, I think, but I'm unsure as to how to set this up. After reading several posts, the post from Ryan Rahif on May 19 at 18:58 is pretty darned close to what I want. Do I need to create another hover div? Do I need to create a hover for each drop down?
thank u
<!Doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairies - Tabbed Dropdown</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>World of Fairies</li>
<li>Fairihabitants
<ul>
<li>Fairies</li>
<li class="cranlink">Craniums</li>
</ul>
</li>
<li>Fairi-bitats
<ul>
<li>Dreams</li>
<li>Tinkling Bells</li>
<li>Rain Drops</li>
</ul>
</li>
<li>Fairy Dust</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* CSS Document - Stylesheet.css */
/* BODY AND CONTAINER
-------------------------------------- */
body {
font-size: 76%;
padding: 0px;
margin: 0px;
}
#container {
width: 650px;
padding: 0px;
margin: 0 auto 0 auto;
}
/* MAIN NAVIGATION
-------------------------------------- */
#nav {
float: left;
width: 650px;
height: 50px;
border-bottom: 2px solid #000;
padding: 0px;
margin: 100px 0 0 0;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
padding: 0px;
margin: 0px;
}
#nav ul li a {
float: left;
width: 150px;
height: 50px;
background-image: url(../images/fairy-gate.jpeg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0 0 0 10px;
}
#nav ul li a:hover {
background-image: url(../images/bg-nav-hover.png);
background-repeat: repeat-x;
}
/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
display: none;
}
#nav li:hover ul {
width: 150px;
display: block;
visibility: visible;
position: relative;
top: 0px;
clear: both;
z-index: 1;
}
.cranlink {
background-image:url(../images/craniums.jpg);
trying to get my first HTML/CSS uni assignment sorted but have become a bit stuck on this. My body tag doesn't sit at the top of the page. I can ensure it does by giving it a negative margin, but I shouldn't need to do that, right? Any help would be much appreciated, thanks.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PhotArt</title>
<link href="main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--begin container -->
<div id="navigationContainer">
<!-- begin navigation bar -->
<div id="navigationBar">
<ul>
<li><a class="logo" href="index.html">PhotArt</a></li>
<li><a class="active" href="index.html">Home</a></li>
<li>Create your art</li>
<li>Framing</li>
<li>Originals</li>
<li>About us</li>
<li>Contact us</li>
</ul>
There are a few other paragraphs after this but I doubt the html is causing any issues.
And then the CSS looks like this:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
border: 0;
}
#navigationContainer {
background-color: #2f2f38;
padding: 0;
margin: 0 auto;
}
#navigationBar {
padding: 0em 0em 10em 0em;
background-color: #2f2f38;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#navigationBar ul {
margin-left: auto;
margin-right: auto;
width: 900px;
padding: none;
}
#navigationBar li {
list-style-type: none;
display: inline;
font: 1em "Trebuchet MS", Helvetica, sans-serif;
}
#navigationBar .active {
color: #ffffff;
}
#navigationBar .logo {
font: 3.5em "Trebuchet MS", Helvetica, sans-serif;
color: #fcfcfc;
}
#navigationBar li a {
text-decoration: none;
color: #a6a4a4;
margin-right: 30px;
}
#navigationBar li a:hover,
#navigationBar li a:active {
color: #ffffff;
}
You need to edit your CSS and add margin-top: 0px; to navigation bar:
#navigationBar ul {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 900px;
padding: none;
}
Try adding margin-top:0px; to #navigationBar
I also assume you've closed all your divs/tags in code below what you've given us.