I have been working on this website and am using media queries to adjust the layout of the view according to the screen size. For the mobile phone size I want to hide the navigation that is already in place and just show a simple "Menu" link that when clicked, displays the Nav Menu. I having been doing research, however I am looking for the simplest way possible with the code that I have. Any ideas would be greatly appreciated. I would like to stay away from javaScript if possible.
<nav>
<ul>
<li>Meet The Practioner</li>
<li>Services & Rates</li>
<li>Book Appointment</li>
<li>Location & Hours</li>
<li>Testimonials</li>
<li>Questions & Answers</li>
<li>Benefits of Massage</li>
<li>Body Sense Magazine</li>
</ul>
Menu
</nav>
This is my jsFiddle that shows the CSS and the rest of the code. http://jsfiddle.net/Floyd/v723oqfc/
So what you could do is:
Create a button called menu-bttn with the css:
a.menu-bttn {
display: none;
//Other properties
}
//You should really use javascript or jquery for button click rather than CSS
a.menu-bttn:focus > nav ul li a {
display: block;
}
...
#media only screen and (max-width:WIDTH) {
a.menu-bttn {
display: inline-block;
}
nav ul li a {
display: none;
width: 100%;
//positioning
}
}
JQuery Click Approach:
<script>
function toggleMenu() {
$('nav ul li a').slideToggle("fast");
}
</script>
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
OR
<script>
$(document).ready(function() {
$('.menu-bttn').click(function() {
$('nav ul li a').slideToggle("fast");
});
});
</script>
<a class="menu-bttn">Menu</a>
Documentation On SlideToggle: http://api.jquery.com/slidetoggle/
You dont HAVE to use SlideToggle, there are other options:
Documentation On Toggle: http://api.jquery.com/toggle/
Pure Javascript Approach:
<script>
var bttn = document.getElementsByClassName('menu-bttn');
var bttn = bttn[0];
function toggleMenu() {
var menu = document.getElementsById(//Id Of nav ul li a elements);
if (menu.style.display === 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
</script>
<html>
...
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
...
</html>
Related
when in mobile view my css responsive menu for mobile, will show the submenu when you click on the link, but how do change the link, to something like 'Close X' as the list is long, and if you back on the link it doesn't close, unless you click a different link.
I've managed to create a separate close link. But this now means I've got two links. I want 1 link which will open, then change to the a close link when the submenu is open and when you click on that it will close.
Thanks
css
nav li ul {
display:none;
}
# open
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
# close
nav ul li #close:hover + .hidden, .hidden:hover {
display: none;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
menu
<ul>
<li><span id="close">Close X don't show till city clicked</span>
Cities ￬ remove and replace with close or up arrow
<ul class=hidden>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
This works as you are hoping I believe, The majority of the function is via CSS to keep jquery to a minimum.
CSS Selectors
> selector for immediate children
~ selector for all siblings of the preceding element
Let me know if this isn't what you were hoping for.
Demo
// Add click event to collapse anchor
$("li > a.collapse").click( function() {
// Remove .expand class from parent
$(this).parent().removeClass("expand");
});
// Add click event to expand anchor
$("li > a.expand").click( function() {
// Add .expand class to parent
$(this).parent().addClass("expand");
});
li > a.collapse, li.expand > a.expand {
display: none;
}
li.expand > a.collapse {
display: inherit;
}
li > a.expand ~ ul {
display: none;
}
li.expand > a.expand ~ ul {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a class="collapse">Close</a>
<a class="expand">Cities</a>
<ul>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
I've created a web application where a use can vote images. When the user hovers with the mouse over a "gridItem" I'll hide an overlay layer and display an other overlay layer with two buttons on it. To get it working on touch devices I also added the :focus pseudo classes.
This works perfectly fine in any desktop browser and it works sort of on touch. The problem I'm facing now is when I try to click on a button on the "hover" overlay, this overlay disappears before I get the click event.
Here's some html code and my css classes:
<div class="gridItem">
<img class="..." src="..." alt="">
<div class="likeLabelOverlay">
small content
</div>
<div class="likeButtonOverlay ghost-center">
<div>
<h3>large content</span>
<button type="button" id="..." class="btn btn-default">button 1</button>
<button type="button" id="..." class="btn btn-default">button 2</button>
</div>
</div>
</div>
I handle the hover on the gridItem:
.gridItem:hover .likeButtonOverlay, .gridItem:focus .likeButtonOverlay {
display: block;
}
.gridItem:hover .likeLabelOverlay, .gridItem:focus .likeLabelOverlay {
display: none;
}
Mobile devices support :active. With your :hover use :active. Here a demo.
.gridItem:hover .likeButtonOverlay, .gridItem:active .likeButtonOverlay {
display: block;
}
.gridItem:hover .likeLabelOverlay, .gridItem:active .likeLabelOverlay {
display: none;
}
<div class="gridItem">
<img class="..." src="..." alt="">
<div class="likeLabelOverlay">
small content
</div>
<div class="likeButtonOverlay ghost-center">
<div>
<h3>large content</span>
<button type="button" id="..." class="btn btn-default">button 1</button>
<button type="button" id="..." class="btn btn-default">button 2</button>
</div>
</div>
</div>
There is no hover on mobile. What you can do is bind some events with jquery on touch.
Like this:
$(document).ready(function() {
$('.gridItem').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
CSS
.gridItem:hover, .gridItem.hover_effect {
rule:properties;
}
We just had to solve this issue for a client at the agency I work with.
I'll also describe the code here so just in case anything happens with the fiddle, it's here in perpetuity.
The Fiddle
https://jsfiddle.net/GrafikMatthew/7nx53twL/
The Libraries
I'm using the 2.2 jQuery library for this, though I'm pretty sure an earlier version could be used if needed.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
The CSS
This is just a barebones presentation so these are the minimum styles required for this approach. You can modify these all you want to match your page design.
<style type="text/css">
.nav-wrapper ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-wrapper > ul::after
{
content: "";
clear: both;
display: block;
float: none;
height: 0;
}
.nav-wrapper > ul > li
{
display: block;
float: left;
padding: 10px;
position: relative;
}
.subnav-wrapper
{
display: none;
background: #000;
position: absolute;
top: 100%;
left: 0;
}
.subnav-wrapper > ul > li {
padding: 10px;
}
.subnav-wrapper > ul > li > a
{
white-space: nowrap;
color: #fff;
}
.nav-wrapper > ul > li:hover
, .nav-wrapper > ul > li.hover
{
background: #000;
}
.nav-wrapper > ul > li:hover > a
, .nav-wrapper > ul > li.hover > a
{
color: #fff;
}
.nav-wrapper > ul > li:hover > .subnav-wrapper
, .nav-wrapper > ul > li.hover > .subnav-wrapper
{
display: block;
}
</style>
The HTML
I'm using a fairly straight forward markup for this menu structure, though since everything aside from the list and anchors, targeting is done via class name, so the elements can be swapped out for ones that work better for your project.
<div class="nav-wrapper">
<ul class="nav">
<li>Link A
<div class="subnav-wrapper">
<ul class="subnav">
<li>Sublink A A</li>
<li>Sublink A B</li>
<li>Sublink A C</li>
</ul>
</div>
</li>
<li>Link B</li>
<li>Link C
<div class="subnav-wrapper">
<ul class="subnav">
<li>Sublink C A</li>
<li>Sublink C B</li>
<li>Sublink C C</li>
</ul>
</div>
</li>
<li>Link D</li>
</ul>
</div>
<hr />
<div class="dummy">
<p>Dummy content...</p>
</div>
The JS
I'm using a standard anonymous enclosure and exposing jQuery via $.
<script type="text/javascript">
(function($){
function MH_ResetAll() {
$( '.nav-wrapper .hover' ).removeClass( 'hover' );
}
function MH_Init() {
// >
// > Environment
// >
$( document ).on( 'touchstart', function( e ) {
MH_ResetAll();
} );
// >
// > Primary Navigation
// >
$( '.nav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {
// Cancel default event behaviors...
e.preventDefault();
e.stopPropagation();
// Hook the important elements for this event...
var ThisA = $( this );
var ThisParentLI = $( ThisA.parents( 'li' ).get( 0 ) );
// Is there a subnav-wrapper in the parent list item?
if( ThisParentLI.find( '.subnav-wrapper').length ) {
// Is the parent list item already hovered?
if( ThisParentLI.hasClass( 'hover' ) ) {
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
} else {
// Reset all other hover states...
MH_ResetAll();
// Add the hover class to the parent list item...
ThisParentLI.addClass( 'hover' );
}
} else {
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
}
} );
// >
// > Secondary Navigation
// >
$( '.subnav-wrapper' ).on( 'touchstart', function( e ) {
// Prevent secondary navigation from bubbling up...
e.stopPropagation();
} );
$( '.subnav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {
// Cancel default event behaviors...
e.preventDefault();
e.stopPropagation();
// Hook the important elements for this event...
var ThisA = $( this );
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
} );
}
$( document ).on( 'ready', function() {
MH_Init();
} );
} )( jQuery );
</script>
How can i use position: fixed; for my menu, when it isn't the first element on the website.
My logo is the top item on the website, thereafter the menu. When i scroll down the page i want the menu to be the top element. How can i do this? And is it possible with only css?
This would require the use of javaScript, but can be done quite simply.
Example
JsFiddle
HTML
<header>
<p class="site-title">
Your logo here
</p>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
ul{
background-color: red;
margin: 0;
}
ul li{
display: inline;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jQuery
$(function ()
{
// Get the initial position of the menu.
var menuTop = $('nav').offset().top;
$(window).scroll(function ()
{
// Check position
if ($(window).scrollTop() > menuTop)
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
Say I have the HTML
<ul>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
and the CSS
li { padding-left: 20px; background-image: url(arrow.png); }
li:hover { background-image: url(arrow-hover.png); }
I want to change the background-image back to arrow.png when li > a is hovered.I am looking for something like this.
li:hover:not(this > a:hover) { background-image: url(arrow-hover.png); }
Apparently there is no way to do this in CSS3. (Thanks Oswaldo and Evan)
If anyone looking for similar solution, I had to use this JavaScript.
$("li").hover(function () { $(this).addClass('hover'); },
function () { $(this).removeClass('hover'); });
$("li > *").hover(function () { $(this).parent().removeClass('hover'); },
function () { $(this).parent().addClass('hover'); });
and change the CSS selector from li:hover to li.hover (or any class you use above)
li.hover { background-image: url(arrow-hover.png); }
actually ,when you will hover on tag inside li ,,it will trigger two hover actions ..one for the parent li and the other for tag ,,you may try to make
li >a:hover { background-image: url(arrow-hover.png) !important; }
it's not tested but you can try it ...
t's been a while since I jQuery'd but
$("li > a").hover(
function(){
$this.parent("li").css("background-image", "url(arrow-hover.png)")
},
function(){
$this.parent("li").css("background-image", "url(arrow.png)")
}
);
I have a menu I created that I would like to appear on hover over of an image. How do I write the css to create that? This is my menu:
<ul id="options" class="optionsMenu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
<li>E4</li>
</ul>
</li>
<li>F</li>
<li>G</li>
</ul>
I would like it to stay hidden and only appear when I hover over the following image:
<img src='...image.png' alt='Options Menu' id="optionsMenuTree"/>
I think I need to do something like this:
#options ul.optionsMenu ul{
display: none;
visibility: none;
}
#optionsMenuTree:hover > ul {
display: block;
}
But I cannot get it to work right. Any help?
As long as optionsMenuTree and options are siblings, you don't need javascript and can use
#options {
display: none;
}
#optionsMenuTree:hover ~ #options {
display: block;
}
See updated JSFiddle
CSS
#options{
display: none;
}
#optionsMenuTree:hover + #options {
display: block;
}
Check this : http://jsfiddle.net/AliBassam/S9cdE/
However, when you remove the mouse of the image, the list will be hidden again, to keep it there, I think you need to use Javascript/JQuery.
JQuery
$("#optionsMenuTree").hover(function(){
$("#options").show();
}, function(){
$("#options").hide();
});
Javascript
<img onmouseover="ShowList()" onmouseout="HideList()"/>
Then:
function ShowList()
{
document.getElementById("options").style.display="block";
}
function HideList()
{
document.getElementById("options").style.display="none";
}
first you have to hide the submenu listitems.
then have to show on hover or main link..
ul#options ul {display: none;} ul#options ul li:hover > ul { display: block; }