I want to create a drop down menu view based on the following HTML / CSS :
<!DOCTYPE html>
<html>
<head>
<style>
html * {
margin: 0;
padding: 0;
}
body {
color: #FFF;
}
#panel, #content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: 0;
width: 750px;
background: #333;
z-index: 100;
padding-top: 200px;
padding-left: 250px;
}
#content {
background: #000;
left: 250px;
right: 0px;
}
#panel > nav {
margin-bottom: 100px;
}
.Dropdown {
position: relative; /* Has to be set, can be overriden */
}
.Dropdown > ul {
position: absolute;
display: none;
list-style-type: none;
}
.Dropdown:hover > ul {
display: block;
}
.Dropdown > ul, /* On the right by default */
.Dropdown.Right > ul { /* Deploys on the right side of the label */
top: 0;
left: 100%;
}
.Dropdown.Bottom > ul { /* Deploys below the label */
top: 100%;
left: 0;
}
</style>
</head>
<body>
<div id="panel">
<nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle -->
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
<div id="content">
</div>
</body>
I would like a developper to be able to extend this drop down CSS to add, for example, a transition between 0 and 1 opacity.
Actually it is not possible with this code because the property display conflicts with the transition one. Adding opacity 0 on the non-hover and opacity 1 on the hover will not work because of that display property.
I've read somewhere on this web site that i could use height 0 and height auto instead of display none and display block (respectivly) but it didn't work either.
Any ideas about how to add transitions please ?
Thanks for your help !
Related
Ive created a box using div class. but Ive been trying to space the row and columnsiV
Ive tried some padding-left and right both it doesnt seem to be working.
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
</section>
Is there a reason you aren't just using margin? Specifically,
li {
margin: 10px;
margin-left: 30px; // if you want a different margin on the left
}
If this is not what you're looking for then please elaborate on your question.
li {
margin:10px;
margin-left:30px;
}
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
To add padding between the rows, you need to add it to list elements.
Target these by using ".box li" in your CSS
You can use this code
.body .box {
margin: 0;
padding: 0;
}
.body .box li {
margin: 0;
padding: 0;
list-style-type: none;
}
.body .box li a {
margin: 0;
padding: 0 15px;
font-size: 18px;
font-weight: 400;
color: #337ab7;
line-height: 36px;
text-decoration: none;
}
.body .box li:hover a {
color: red;
}
<div class="body">
<ul class="box">
<li>Maths</li>
<li>English</li>
<li>Chemistry</li>
<li> Commerce </li>
<li>Computer</li>
<li>Biology</li>
</ul>
</div>
I am creating a menu using an unordered list that mixes list items of different sizes, some are half the height and width of others. They all float left. What I'm getting is this:
If I add clear:left to the third small item I get this:
What I want is for the second and fourth (or third and forth) small items to float below the other two, like this:
Is there a way to do this with css? The menu is created dynamically so forcing a particular position won't work, it needs to be able to flow into the proper position.
Would having multiple <ul/> work for you ? If so, the following Codepen would work : https://codepen.io/anon/pen/qPaVar
Same code as an embedded code snippet :
ul {
list-style : none;
padding: 0;
margin: 0;
text-align: center
}
li {
margin: 0
}
li.left {
float: left
}
div.small {
background-color: blue;
width: 20px;
height: 20px
}
div.large {
background-color: yellow;
width: 40px;
height: 40px;
}
<ul>
<li class="left">
<div class="large">A</div>
</li>
<li class="left">
<ul>
<li class="left">
<div class="small">1</div>
</li>
<li class="left">
<div class="small">2</div>
</li>
</ul>
<ul>
<li class="left">
<div class="small">3</div>
</li>
<li class="left">
<div class="small">4</div>
</li>
</ul>
</li>
<li class="left">
<div class="large">B</div>
</li>
</ul>
Hope this helps!
Try the grid-auto-flow: dense
https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow
try this
.main li {
display: inline-block;
vertical-align: middle !important;
width: 200px;
height: 200px;
border: 1px solid;
}
.inner-div li {
width: 99px;
height: 89px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
ul.inner-div {
list-style: none;
padding: 0;
}
<div class="container">
<ul class="main">
<li>div 1</li>
<li>div 2
<ul class="inner-div">
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
</ul>
</li>
<li>div 3</li>
</ul>
</div>
I'm trying to create a header hero but my problem is that my background image goes on all my contents. Actually it has lower z-index than content but I don't know why doesn't it go on background.
.header
{
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground
{
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,.header ul li
{
width: 2vw;
float: right;
}
.header .container
{
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
</ul>
</div>
</div>
Only a positioned element can use z-index. According to MDN:
The z-index property specifies the z-order of a positioned (that is, one with any position other than static) element and
its descendants.
The .container doesn't have a position, so the z-index: 2 is ignored. Add position: relative to it:
.header .container {
position: relative;
z-index: 2;
}
.header {
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
.header .container {
position: relative;
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
You can also use a negative z-index: -1 on the element you want to push back:
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header {
position: relative;
width: 100vw;
background-color: blue;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
Please help me to solve my problem.
I need to make head menu with pictures.
Now i have:
What i need to do:
My HTML code here:
<div id="head">
<div class="site_info">
<div id="tabs">
<ul id="tabMenu">
<li class="dropdown">
<div><a class="tab1">поиск по производителю</a></div>
</li>
<li class="dropdown">
<div><a class="tab2">поиск по назначению</a></div>
</li>
<li class="dropdown">
<div>
<span id="more_search"></span>
<a class="tab4" href="/emarket/cart/">покупки</a>
</div>
</li>
<li class="dropdown">
<div><a class="tab3">сравнение</a></div>
</li>
<li class="dropdown">
<div><a class="tab3">кабинет</a></div>
</li>
</ul>
</div>
</div>
<div class="work" umi:element-id="40">
<div umi:field-name="order_info_top"></div>
</div>
</div>
CSS:
#main #head div.site_info {
padding-top: 45px;
}
#main #head div.site_info ul {
width: 50%;
margin: 0 auto;
min-width: 1024px;
}
#main #head div.site_info ul li {
display: inline;
margin-right: 18px;
}
#main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
float: left;
margin-left: 89px;
}
Give a height and width to the individual menu. Then add a style with your image as its background. Position the backgruond image top center.
HTML
<div>
<ul>
<li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>
<li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
</li>
</ul>
</div>
CSS
li
{
list-style: none;
float: left;
width :100px;
}
.dropdown .tab1
{
background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
padding-top: 10px;
}
.dropdown .tab2
{
background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
padding-top: 10px;
}
DEMO
Just change your text for <img src="images/image.jpg">
And if you want it to be a link: <img src="images/image.jpg" width="100" height="100"/>
you could just use images instead of text and add in the image using the CSS backgroundd feature
li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx }
EDIT: in theory i think i could accomplish this by having a dummy ul between the 2 level and then positioning the 'second (now 3rd) level. Crude proof of concept > http://jsfiddle.net/petergus/jk7vU/
I have a horizontal dropdown menu that I am trying to get to stretch its parent div height.
The problem I run into is the child ul. In order to get it to sit on a line below the main menu I have to use position: absolute but that takes it out of the flow.
Is it even possible to have a multilevel horizontal list without set container height?
EDIT: Here is an illustration screenshot of what i am trying to accomplish. EXCEPT the content (black text behind) should slide down.
Here is how the content slides down >
as far as i can tell this is simple a problem of position: relative vs absolute
Please see a sample setup at http://jsfiddle.net/petergus/nC32t/
HTML:
<div class="mnavwrapper">
<div id="mnav">
<ul class="menu clearfix">
<li class="first expanded">
<span title="" class="nolink">Click me here</span>
<ul class="submenu clearfix">
<li class="first leaf">consultancy</li>
<li class="leaf">daylight</li>
<li class="leaf">solutions</li>
<li class="leaf">design</li>
<li class="leaf">something</li>
<li class="last leaf">team</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">portfolio</span>
<ul class="submenu clearfix">
<li class="first leaf">all projects</li>
<li class="leaf">commercial</li>
<li class="leaf">public</li>
<li class="leaf">private</li>
<li class="leaf">something</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">another</span>
<ul class="submenu clearfix">
<li class="first leaf">techniques </li>
<li class="last leaf">influences</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<p>Hello text</p>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul.menu {
/*display: inline-block;*/
list-style: none;
clear: both;
width: 100%;
display: block;
position:relative;
}
ul.menu li {
/*float: left;*/
padding: 0px 10px;
display: inline;
}
ul.menu li {
float: left;
}
ul.submenu {
list-style: none;
position: absolute;
width: 100%;
}
ul.submenu li {
float: left;
}
.mnavwrapper {
/*clear: both;*/
}
#mnav {
background: lightblue;
/*float: left;*/
width: 100%;
}
#contentbody {
background: pink;
}
p {
padding: 0px;
margin: 0px;
}
jQuery:
$('.active-trail').addClass('selected');
$('ul.menu .nolink').click(function() {
$(this).parent().toggleClass('selected').end().next('ul').slideToggle().parent().siblings('li').find('ul').slideUp(150).parent().removeClass('selected');
});
I think this is what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<style type="text/css">
ul {
display: table;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
width: 13em;
}
li li {
display: none;
width: auto;
}
li:hover li {
display: inline-block;
}
</style>
</head>
<body>
<p>dfhg</p>
<ul>
<li>Hover here for sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
<li>Yet another sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
</ul>
<p>Hello text</p>
</body>
</html>
cheers,
gary
something like this?: http://jsfiddle.net/chanckjh/DDeRT/
html:
<div class="nav">
<ul>
<li class="nav1">nav
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li class="nav2">nav2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</div>
css:
.nav > ul >li{
display: inline;
position: absolute;
}
.nav1{
left: 50px;
}
.nav2{
left: 100px;
}
.nav > ul >li > ul > li{
display: none;
}
.nav > ul >li:hover > ul > li{
display: inline;
}