I'm working on blogger and I've been trying to make a menu with some dropdowns using JQuery but for some reason it isn't working on Blogger, in my pc it works just fine. I've added the scripts and the style to the page HTML and then I placed the body on a HTML block but it doesn't work there.
Picture from the blog structure with the HTML Block
Here's the demo I'm using on my pc.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.menu {
padding:10px 0;
width: 500px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li ul {
background-color:rgb(225,75,75);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
.menu li li {
position:relative;
margin:0;
display:block;
}
.menu li li ul {
position:absolute;
top:0;
left:500px; /* make this equal to the width of the sub nav above */
margin:0;
}
.menu a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
.menu a {
color:#000;
text-decoration:none;
display:block;
}
.menu a:hover,
.menu a:focus,
.menu a:active {
color:rgb(255,00,00);
}
/* style sub level links */
.menu li li a {
border-bottom:solid 1px rgb(200,50,50);
margin:0 10px;
padding:0;
}
.menu li li:last-child a {
border-bottom:none;
}
/* show arrows for dropdowns */
.menu li.dropdown > a {
background-image:url('../img/arrow-down.png');
background-position:right 20px;
background-repeat:no-repeat;
}
.menu li li.dropdown > a {
background-image:url('../img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
</style>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown(200,stop());
},
function(){
$(this).children('.sub-menu').slideUp(200,stop());
}
);
function stop(){
$('.sub-menu').stop(true, true);
}
});
</script>
</head>
<body>
<div class="menu">
<ul >
<li>Home</li>
<li class="dropdown">Streams
<ul class="sub-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>Guides</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
Edit:
I've also trying making an alert in the JQuery function and when the mouse passed over the menu the alert appears but the dropdown doesn't.
The answer to my own question is... Blogger's gadget for HTML/Javascript block applies some css that was making the bar not show up. You can either find a way to remove the css from the gadget or simply place your HTML code on the HTML page.
Related
I'm working on getting a personal website started and I downloaded a couple templates from HTML5 UP. There's one I really like, but I haven't been able to add dropdown lists to the menu items at the top.
Here's the URL to the site: zachdamit.cechire.com/five/
I'd like the dropdowns to be very similar to the ones on this example. I was following this tutorial, but after adding all the HTML and CSS elements in, it still wasn't working. I'm imagining it's conflicting with the JavaScript files associated with the page.
I know a decent amount of HTML, but I'm still learning. CSS and JavaScript are still pretty new to me. Let me know if I can post anything else that could potentially help.
Any assistance is greatly appreciated!
EDIT:
Here's the HTML I edited:
<div class="menu-wrap">
<nav id="nav">
<ul class="clearfix">
<li>Intro</li>
<li>What I Do</li>
<li>Who I Am
<ul class="sub-menu">
<li>Biography</li>
</ul>
</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
And here's the CSS I added:
<!--ADDED MENU BEGIN-->
.clearfix:after {
display:block;
clear:both;
}
/* Menu setup */
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
/*background:#3e3436;*/
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
/*font-family:'Ek Mukta';*/
}
.menu a {
transition:all linear 0.15s;
/*color:#919191;*/
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
/*color:#be5b70;*/
}
/* Dropdown Arrow (optional) */
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top Level */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
/*background:#2e2728;*/
}
/* Bottom Level */
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
/*background:#2e2728;*/
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
/*background:#3e3436;*/
}
<!--ADDED MENU END-->
The CSS is pretty much straight from the site I linked above. I was imagining that I could edit the design and such one element after a time after I got it working, but after adding the code, it removed the first image on the site and formatted the menu bar weird. Like I said, I'd like it to look similar to the example linked above.
Thanks!
You are using id rather then class(according to your given css) so just replace <nav id="nav"> to <nav class="menu"> and your menu will work and also i have changed menu width from 1000px to 100% as for good look. Change it according to your need.
Here is demo. Hope it will help.
I want to make multilevel responsive drop down menu. the problem is that on clicking on Purchase, Sale and New menu the drop down menus are appearing but they remain open on again click. i want to show/ hide it on click like the #handle. it means that when i click to Purchase menu the relevant drop-down list should be appearing, on again click it must be shown off. The same requirements are with Sale and New menus.
the code are below,
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available Stock</li>
<li>
Purchase
<ul class="sub-menu">
<li class="sub-list">Purchase Return</li>
</ul>
<li>
Sale
<ul class="sub-menu">
<li class="sub-list">Sale Return</li>
</ul>
</li>
<li>Cash Recieve</li>
<li>Cash Payment</li>
<li>Cash Recieve</li>
<li>
New
<ul class="sub-menu">
<li class="sub-list">New Customer</li>
<li class="sub-list">New Supplier</li>
<li class="sub-list">New Town</li>
<li class="sub-list">New Product</li>
</ul>
</li>
<li>Opening Stock</li>
<li>Gate Pass</li>
<li>Sale History</li>
</ul>
</nav>
</div>
javascript:
<script>
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('ul#nav li').on('click', function() {
$('.sub-menu').toggleClass('sub-menu');
});
</script>
css:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
}
.clear {
clear:both;
}
ul {
list-style-type:none;
margin:0;
padding:0;
-moz-transition:max-height 0.4s;
}
ul#nav li {
background:#fff;
float:left;
}
ul#nav li a {
color:black;
display:block;
background:#fff;
padding:10px;
text-decoration:none;
border-bottom:1px solid green;
}
ul#nav li a:hover {
background:#000;
color:white;
}
ul#nav li .sub-list {
float:none;
}
.sub-menu {
display:none;
}
ul#nav li:hover .sub-menu {
display:block;
position:absolute;
}
#handle {
display:none;
}
#media screen and (max-width:480px) {
ul#nav li {
width:100%;
text-align:center;
}
ul {
max-height:0;
overflow:hidden;
}
.showing {
max-height:50em;
}
ul#nav li .sub-menu {
max-height:0;
}
.sub-menu {
max-height:2em;
}
#handle {
display:block;
background:#093;
color:#fff;
padding:10px;
text-align:center;
font-weight:bold;
cursor:pointer;
}
}
Try this
$('ul#nav a').on('click',function(e){
$(this).next('ul').toggleClass('sub-menu');
});
When you click on a link, ul tag that is next sibling of clicked link is shown.
I had created a menu with jquery, the issue is when i click on a submenu; site refreshes and then the menu doesn't remain active state, I want it to show active its menu and submenu when clicked..
also created a fiddle http://jsfiddle.net/akshaydesai/ptghs8xo/
<ul class="menu">
<li><div>PRODUCTS</div>
<ul>
<li>Scada Software</li>
<li>Energy Monitoring</li>
<li>Tension Monitoring</li>
<li>Protocol Gateways</li>
<li>Gas Monitoring</li>
<li>Led Display</li>
</ul>
</li>
<li><div>SOLUTIONS</div>
<ul>
<li>Power & energy</li>
<li>Process Automation</li>
<li>Medical Diagnostics</li>
<li>Machine Tools</li>
<li>Remote Monitoring</li>
<li>Industries</li>
</ul>
</li>
<li><div>OUR EXPERTISE</div></li>
<li><div>ABOUT US</div></li>
<li><div>CONTACT US</div></li>
</ul>
.menu ul{
text-align:justify;
width:300px;
min-width:500px;
margin-top:60px;
}
.menu ul:after{
content:'';
display:inline-block;
width:100%;
}
.menu ul li{
display:inline-block;
list-style:none;
white-space:nowrap;
margin:0;
padding:0;
}
.menu ul li a{
text-decoration:none;
color:#000;
}
.menu ul li:hover a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu ul li:hover ul li a{
color:#000;
border:none;
margin-right:25px;
}
.menu ul li:hover ul li:hover a{
color:#CCCC00;
}
.menu li.active a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu li.active ul li a{
color:#000;
margin-right:25px;
border-bottom:none;
}
.menu li.active ul li:hover a{
color:#CCCC00;
margin-right:25px;
}
.hide{
display:none;
}
$(document).ready(function(){
$(".menu > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('.menu ul').slideUp(700);
}
$(this).next().slideToggle(700);
});
var url = window.location.href;
var $current = $('.menu li ul a[href="' + url + '"]');
$current.parents('.menu ul').slideToggle();
$current.next('.menu ul').slideToggle();
});
Use separate URLs in href, corresponding to each page. So, when the page is refreshed, URL will be changed and menu on the page will exactly know which page is currently opened and which menu must be visible.
EDIT
There is nothing wrong with your code, assuming that you have set the correct hrefs, like:
<li>Scada Software</li> // I'm using a localhost example here just to simplify.
This works. If not, check the url:
Add directly after var url = window.location.href;
this: console.log('url:' + url);
or this: alert('url:' + url);
and the current url will be outputted.
You can also use cookies (or another way to store a persistent variable) to recall the active state after refreshing the page.
Here's an example of using cookies with jQuery: How to set/unset cookie with jQuery?
What I'm trying to do is create a drop down menu to use on a mobile website. Since you can't hover over a menu item to see the submenu, i need to get around that problem. I've researched this and attempted to solve this problem. A lot of sites recommend using JS with the onclick function. I cant get a grip of it. Thanks.
Here is the HTML.
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<div class="smenu_div">
<ul>
<li>Menu
<ul>
<li>Home</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</ul>
</ul>
</div>
</body></html>
Here is CSS.
/*Small Menu*/
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
}
.smenu_div li ul:active{ display: block; }
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
color:#000000;
background:#fdff30;
}
I can barely get your question, but for creating menus to use in websites for small screen with html and css, try http://css-tricks.com/convert-menu-to-dropdown/
just adjust the CSS within the onclick function.
HTML:
<div id="menuclick">Click to show menu</div>
<div id="hiddenMenu" style="display: none;">
TEXT GOES HERE
</div>
JavaScript:
var hidden = true;
document.getElementById('menuclick').onclick = function() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
working example: http://jsfiddle.net/F5nJT/1/
if you want a floating menu you'll want to play with the css position of the element so that it doesn't cause the document to reflow when its display changes.
I am trying to create cloud tags in html.I am able to create them using ul tag and applying css on them.Following is my cloud tag image:
Now i want effects like that, when i move my mouse to any of the text(i.e any cloud tag),say "Learn java" tag it should zoom out and when i move my mouse out of it it should go back to its place. I have seen this functionality on many websites.
following is my code in 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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#java").hover(function(){
alert("You entered on java cloud tag!");
},function);
});
</script>
<title>Css Globe: tag clouds</title>
<style>
body {
margin:0;
padding:0;
background:#e1e1e1;
font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
a{color:#3c70d0;}
h1{
font-size:180%;
font-weight:normal;
margin:0 20px;
padding:1em 0;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:500px;
}
#container{
margin:0 auto;
text-align:left;
width:700px;
background:#fff;
}
#main{
float:right;
display:inline;
width:380px;
margin-left:20px;
}
#side{
float:left;
display:inline;
width:260px;
margin-left:20px;
}
#footer{
clear:both;
padding:1em 0;
margin:0 20px;
}
/* Tag cloud */
.tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9 url(bg_tags.gif) repeat-x;
}
.cld{
height:100px;
width:400px;
}
.tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* alternative layout */
.tags .alt{
text-align:left;
padding:0;
background:none;
}
.tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
.tags .alt .tag1,
.tags .alt .tag2,
.tags .alt .tag3,
.tags .alt .tag4,
.tags .alt .tag5{font-size:100%;}
.tags .alt .tag1{background:#7cc0f4;}
.tags .alt .tag2{background:#67abe0;}
.tags .alt .tag3{background:#4d92c7;}
.tags .alt .tag4{background:#3277ad;}
.tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body> <!--******************************************************************************-->>
<div id="container">
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
<div id="side">
<h2>Side column (Tag Cloud)</h2>
<div class="tags">
<ul class="cld">
<li class="tag1" id="java">Learn java</li>
<li class="tag2">Find Markets</li>
<li class="tag3">sitemap</li>
<li class="tag2">Sales</li>
<li class="tag4">Gohome</li>
<li class="tag1">Movies</li>
<li class="tag1">It Jobz</li>
<li class="tag5">Gym</li>
<li class="tag2">Sea food</li>
<li class="tag1">Hospital</li>
<li class="tag3">Smart phone</li>
<li class="tag4">Pizza </li>
<li class="tag1">Aerobics</li>
<li class="tag5">Electronics</li>
<li class="tag1">Anti-Virus</li>
<li class="tag2">Travel</li>
</ul>
</div>
</div>
</div>
</body>
</html>
,So please give some solution to achive this.
Thank you in advance.
just use css3 transform scale property
.element{
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.element:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
demo:http://jsfiddle.net/raJwX/
**
Update:
**
Demo: http://jsfiddle.net/raJwX/1/
.tags li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
This is what you want. - JS Fiddle
Add to CSS:
.tags ul li {
-moz-transition: font-size 0.2s;
-webkit-transition: font-size 0.2s;
transition: font-size 0.2s;
}
Replace jQuery with:
$(document).ready(function(){
$("#java").hover(function(){
$(this).css({'fontSize': '150%'});
}, function(){
$(this).css({'fontSize': '100%'});
});
});
Adjust sizes/timings/etc as appropriate.
Cheers.
CSS "transform" property is what you are looking for that this will help you out to achieve this.
However I just took your code and made changes in two CSS classes
.tags li a{
text-decoration:none;
display:inline-block;
-webkit-transition: all .2s ease-in-out;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
-webkit-transform: scale(1.3);
}
For reference http://jsfiddle.net/yNt6X/3/
Hope you gets what you are looking for.
P.S. I have just added css for webkit browser.
Animate method can be used with best effect as used in following link
$(this).animate({width: "500px"}, 'slow');
Above method is called on mouseover and mouseout function on html element.
http://jsfiddle.net/jquerybyexample/nPeaV/
Using jQuery .css() property you can change font size to smaller which make an effect of "zoom out" but actually the font is only smaller.
Example
<script>
$(document).ready(function(){
$("#java").hover(function(){
$("#java").css('font-size', "10px");
});
});
</script>
Also, when you out of hovering "Learn Java" you can use the event onMouseOut to return the font to his normal font size.
Example
<script>
$(document).ready(function(){
$("#java").mouseout(function(){
$("#java").css('font-size', "18px"); // Assuming that normal font is 18px.
});
});
</script>
Fiddle