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.
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'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.
I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)