I have the following div:
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>
and I want that the images will be at the same size but be in different levels
I cant upload photo but I attaching a link for a page that is a very good example of what I mean to
http://www.wix.com/website-template/view/html/760?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F32&bookName=new-ecom&galleryDocIndex=0&category=all&metaSiteId=
This is one way to do it, if I got your question right.
.wrapper ul {
display: flex;
}
.wrapper ul li {
margin: 10px;
list-style: none;
}
.wrapper ul li:nth-child(odd) {
margin-top: 50px !important;
}
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>
You could solve it like this:
.wrapper li {
float: left; /* Puts them on the same row. */
margin: 10px; /* Some space around them. */
list-style: none; /* Remove the bullet point. */
}
/* Individual top margins for the different list items. */
li.feature-1 { margin-top: 20px; }
li.feature-2 { margin-top: 40px; }
li.feature-3 { margin-top: 0px; }
/* ...and so on... */
You could also use the nth-child() pseudo-selector as suggested in other answers, but then it will not work in IE 8 and below (not a big problem, but still).
I've created something similar but without the images as I do not have them
https://jsfiddle.net/cjqzpb7p/
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1">Hi</li>
<li class="feature-2">Block</li>
<li class="feature-3">Blockz</li>
<li class="feature-4">Blocks</li>
<li class="feature-5">Blockx</li>
</ul>
</div>
</div>
#features li {
height: 400px;
background: red;
width: 180px;
display: block;
list-style-type: none;
float: left;
&:nth-child(2n+2) {
margin: 50px 20px 0 20px;
}
}
Markup CSS done in SASS
Related
I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.
please see the picture for more information;
when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?
many thanks!
My code;
<div id="knoppen">
<div id="Plaat" onclick="URL" onmouseover="ShowP()">
<button id="plaatknop">Platenwarmtewisselaar </button>
</div>
<div id="buis">
<button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button>
</div>
<div id="productenplaat">
<div id="gelast">
<button id="gelastknop">Gelasteplatenwisselaar </button>
</div>
<div id="gesoldeerdplaat">
<button id="gesoldeerdknop">gesoldeerde platenwisselaar</button>
</div>
<div id="pakkingenplaat">
<button id="pakkingenknop">platenwisselaar met pakkingen</button>
</div>
</div>
You can use like below code
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Platenwarmtewisselaar </li>
<li class="submenu">Buizenwarmtewisselaar >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Gelasteplatenwisselaar </li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
I have an anchor tag with a hamburger style css that toggles a fly-out menu. The thing I am stuck at is that I always want it to stay on top however at present the flyout menu goes over the anchor hamburger and hides it. The flyout menu has the class called nav-container any help is welcome here as I have tried to solve this for a few hours. Thanks in advance.
HTML -
<div class="container">
<nav id="main-nav" class="hc-nav hc-nav-1">
<ul>
<li class="Test page">
Test page
<ul>
<li class="nav-has-sub">
Sub test page
<ul>
<li>
Sub sub test page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<a class="toggle">
<span></span>
</a>
</div>
Flyout HTML -
<div class="nav-container" style="">
<div class="nav-wrapper nav-wrapper-0">
<div class="nav-content">
<ul>
<li class="nav-close"><span></span></li>
<li><a class="toggle toggle-open hc-nav-trigger hc-nav-1 nav-item" style="top:-25px;left:10px">
<span></span>
</a>
</li>
</ul>
<ul>
<li class="Test page nav-parent">
<input type="checkbox" id="hc-nav-1-1-0" data-level="1" data-index="0" value="n83m4ogohw-gjximxnm4rq">Test page<span class="nav-next"><label for="hc-nav-1-1-0"></label></span>
<div class="nav-wrapper nav-wrapper-1">
<div class="nav-content">
<h2>Test page</h2>
<ul style="text-indent: 40px;">
<li class="nav-has-sub nav-parent">
<input type="checkbox" id="hc-nav-1-2-0" data-level="2" data-index="0" value="vjoqryeoc9-trdi4kvf59">level 2.1<span class="nav-next"><label for="hc-nav-1-2-0"></label></span>
<div class="nav-wrapper nav-wrapper-2">
<div class="nav-content">
<h2>level 2.1</h2>
<ul style="text-indent: 80px;">
<li>level 3</li>
</ul>
</div>
</div>
</li>
<li>level 2.2</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li class="Another top level">Another top level</li>
</ul>
</div>
</div>
</div>
CSS
.toggle
{
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
width: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 0
}
.nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 350px;
height: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: transform .4s ease;
padding-bottom: 450px;
}
It was a very simple case of giving the class .nav-container a z-index:0
Thanks everyone for posting.
I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/
I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?
There is an additional "/" in the relative address that you have defined. Remove it.
I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle