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
Related
For the navigational items which have a submenu, for example, 'Primary Fees', I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.
Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over 'Grade 1-3 Boarding', I want to keep 'Primary Fees' highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.
The problem is when I hover over the submenu items e.g. 'Grade 1-3 Boarding', it applies the rotating arrow animation to ALL the main menu items which have the same arrow and arrow class, .rotateOnHover.
How can I hover over a submenu item and apply my desired hover effects to its parent Menu Item Only and not all the menu items?
Any help will be appreciated.
Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I'm learning on the job.
This is the code for the sidebar
HTML
<div class="sidebar-widget">
<div class="sidebarExplore">
<h4>
<span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
<i class="fa fa-globe" aria-hidden="true"></i> Explore This Section</span>
</h4>
</div>
<ul class="sidebarExploreList">
<li class="dropdownsidebaritem">
Primary Fees <i class="fa fa-chevron-circle-down rotateOnHover"></i>
<div class="sidebarExploreSubmenu" style="font-size: 12px;">
Grade 1 - 3 - Boarding
Grade 4 - 7 - Boarding
Other Costs - Boarding
Reception - Day School
Grade 1 - 3 - Day School
Grade 4 - 7 - Day School
Other Costs - Day School
</div>
</li>
<li class="dropdownsidebaritem">Secondary Fees <i class="fa fa-chevron-circle-down rotateOnHover"></i></li>
<li>Admission Forms</li>
<li>School Fee Policy</li>
</ul>
</div>
CSS
.sidebar-widget {
border:1px solid #afb1b3;
margin-top: 13.8%;
margin-right: 5%;
overflow: hidden;
background-color: #f3f3f3;
float: right;
width: 20%;
height: auto;
}
.sidebar-widget ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-widget ul li {
list-style-type: none;
width: 100%;
border-top: 1px solid black;
}
.sidebar-widget ul li:last-child{
list-style-type: none;
width: 100%;
border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
display: block;
position: relative;
text-decoration: none;
text-align: center;
padding: 20px;
font-size: 18px;
font-weight: 100;
text-rendering: optimizeLegibility;
}
.sidebarExploreSubmenu{
display: none;
position: relative;
color: black;
background-color:white;
font-size: 11px;
border-bottom: 0.5px solid bisque;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.sidebarExploreSubmenu a{
padding: 10px;
text-decoration: none;
display: block;
text-align: center;
font-size: 10px;
}
.rotateOnHover {
font-size:18px;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sidebar-widget a:hover {
background-color: #990000;
color: white;
}
.dropdownsidebaritem a:hover .rotateOnHover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sidebarExploreSubmenu a:hover{
font-size: 10px;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$( '.dropdownsidebaritem' ).hover(
function(){
$(this).children('.sidebarExploreSubmenu')
.delay(100)
.slideDown(500);
},
function(){
$(this).children('.sidebarExploreSubmenu')
.clearQueue()
.slideUp(500);
}
);
});
$(function() {
$('.sidebarExploreSubmenu a').hover(function() {
$('.rotateOnHover').css('transform', 'rotate(180deg)');
}, function() {
// on mouseout, reset the transform
$('.rotateOnHover').css('transform', '');
});
});
</script>
First of all don't style inline elements, example:
Grade 4 - 7 - Day School
instead make it like that:
Grade 4 - 7 - Day School
and then in style.css add:
.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }
It can make your website messy. Try to do everything in style.css, remember that there're levels in which browser are reading styles, example:
!important > inline styles > #style .style .style > .style .style > .style
I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}
I don't probably know how to search for this precise question and I haven't found anything, so I am sorry if there is already asked somewhere.
I only have 3 buttons and the index is the "Inicio" page. I've applied a :hover to the buttons, but I want to keep it fixed for the button of the displayed page. Obviously, I want to have "Inicio" in this state at the beginning.
(jsfiddle below)
<!-- menu -->
<nav id="nav">
<ul>
<a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
<a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
<a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
</ul>
</nav>
#nav {
padding-top: 27px;
padding-left: 25%;
}
#nav ul li {
list-style:none;
display:inline-block;
margin-left: 4%;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 100%;
color: #FFF;
}
.text_menu {
padding-top: 5px;
}
.boton {
width: 15%;
height: 57px;
background-color: #0099ff;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px solid #000000;
}
.boton:hover {
background-color: #0033ff;
}
Here is a jsfiddle:
http://jsfiddle.net/7jbUj/
Thanks for your responses.
U can simply add class like .hovered to current button like
HTML:
<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>
CSS:
.hovered {
background-color: #0033ff;
}
UPD: Fiddle
UPD2: For page changing
U simply can add and remove class on `click' like:
$('nav ul a').on('click', function(){
$('nav ul a li.hovered').removeClass('hovered');
$(this).children('li').addClass('hovered');
})
Fiddle2
If you want to use without JQuery, you have to use it in javascript
HTML :
<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>
CSS :
.mnu{
background-color : #451;
margin-left:20px;
font-size:30px;
}
a:hover{
background-color:#ccc;
}
.hovered{
background-color:#ccc;
}
JS :
var prev_mnuid= "mnu1";
function makeSelected(mnuid){
document.getElementById(prev_mnuid).className = "mnu";
document.getElementById(mnuid).className = "mnu hovered";
prev_mnuid=mnuid;
}
Fiddle : http://jsfiddle.net/rajaveld/t31zc8jx/
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}