I'm having some trouble when designing a responsive layout as follows below:
If you browse to http://www.wickersleysixthform.net you can see this in action.
Basically I'm trying to create a responsive menu so in browsers of 768px and above you will see a normal horizontal navigation. Then for anything under 481px you will see the "three line" menu with a .slideToggle() effect on that once pressed drops down the menu.
I can sort of get this to work, but the .slideToggle() isn't pushing the rest of the content down which I need it to do. Also the three lines won't appear if I re-size my browser screen manually however if I resize then refresh the page it will do, but if I do that then the normal links in the larger screen size don't show. I hope that makes sense.
This is the jQuery I'm using for the toggle inside a jQuery(document).ready(function($) {});
/* getting viewport width */
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
$(".top-nav").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$(".top-nav").slideToggle();
});
}
/* if is above or equal to 768px */
if (responsive_viewport >= 768) {
$(".top-nav").show();
}
Can anyone help? No doubt it's something simple but it's driving me insane. Possibly CSS based rather than the jQuery?
The CSS I'm using is as follows (in my base/mobile stylesheet).
.header {
background-color:#blue;
padding-top:10px;
height:50px;
}
#menu {
display:block;
font-size:1.75em;
position: absolute;
right: 10px;
top: 2px;
}
.top-nav {
display:none;
}
.top-nav.open {
display:block;
background:#blue;
}
In my 768 and up stylesheet:
.header {
padding-top:0;
height:70px;
position:fixed;
width:100%;
z-index:10;
}
#menu {
display:none;
}
.top-nav {
display:block;
}
My HTML structure:
<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<a rel="nofollow" href="http://www.wickersleysixthform.net">
<img id="logo" width="50px" height="36px" src="http://www.wickersleysixthform.net/wp-content/themes/sixthform/library/images/white.png">
</a>
<nav role="navigation">
<div id="menu">☰</div>
<ul id="menu-main-menu" class="nav top-nav clearfix">
<li>About</li>
<li>
Current Students
<ul class="sub-menu"></ul>
</li>
<li>Courses</li>
<li>Student Life</li>
<li>Prospectus</li>
<li>Apply</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
The problem is that your header element has a fixed height of 50px. So when the menu expands the header stays the same height.
Removing the height or replacing it with min-height solves your problem
Related
i hope to use a navigation menu bar which extracted from another post in stack overflow. here is my code
CSS
<style>
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
height:100%;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
</style>
HTML
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<i class="fa fa-star"></i> <span>Terms and conditions</span> <!-- nav menu no need for <ul> or <li> tags here -->
<i class="fa fa-calculator"></i><span>Privacy Policy</span>
<i class="fa fa-envelope"></i><span>About Us</span>
<i class="fa fa-facebook"></i><span>Help</span>
</nav>
JAVA SCRIPT
<script>
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
</script>
I want to get align left menu items with left padding 10px.(tried lot of ways. but unsuccessful)
I want to put hamburger icon in right side of navigation bar.
I need to close opened menu on outside clicking using pure javaScript.(by clicking anywhere outside)
all must be responsive.
please help me to solve these three problems. it's highly appreciated.
This is the fiddle: https://jsfiddle.net/akslk/105phkog/10/
Remove the display: flex from the <a> tags;
Add a display: flex !important, flex-direction: column and
justify-content: flex-start to your <nav> tag;
Here's an example:
jsfiddle.net/mdyvzx09/2
Feedback: adding linebreaks in your CSS code can improve its readability :)
I have a mobile nav button that upon touching/clicking, should expand and reveal page links. Problem is when you first start the page the button is already expanded:
But should actually load page with elements hidden like so:
The X icon and Line-stack Icon are also reversed. How would I switch these icons around and also make sure the page loads with them closed? I tried switching the icons classes in the jQuery function to switch the x and line-stack but that hasn't worked.
I know there is a simple concept I am missing but I am quite new to jQuery and am having trouble here.
My HTML:
<nav>
<div class="row">
<img src="img/logoblack.png" alt="logo" class="logo img-fluid">
<img src="img/logoblack.png" alt="logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>About</li>
<li>Skill</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
My CSS:
.mobile-nav-icon {
float: right;
margin-top: 30px;
cursor: pointer; /* Used since no href tag specifying link type */
display: none;
}
My jQuery:
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
nav.slideToggle(200);
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
Figured it out, needed to create a media query that would hide the .main-nav with display-none;. This way the tags were hidden on mobile devices but still shows in a navbar on a browser:
/* Small phones to small tablets from: 481px to 767px*/
#media only screen and (max-width: 767px) {
.main-nav {
float: left;
margin-top: 25px;
margin-left: 25px;
display: none;
}
}
I have a collapsible menu that has the following class when closed:
<div class="menu one collapse">
And the following class when opened:
<div class="menu one in collapse">
I want to use the MutationObserver or jQuery to monitor the collapsible menu class and change the following from
<div class="monitored-class three" style="display: block;">
to
<div class="monitored-class three" style="display: none!important;">
When the menu is open, and to revert the changes when the menu is closed.
I have been searching for the past hour for this and the closest I have come is JQuery Detect class changes but the suggested answer right at the bottom:
var mut = new MutationObserver(function(mutations, mut){
// if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observer(document.querySelector(".slide-out-div"),{
'attributes': true
});
Does not have enough details and code for me to proceed. There is also a more comprehensive answer here:
https://stackoverflow.com/a/14570614/5619682
But it does not directly address what I need to do.
I'm thankful for any help! :)
There is acctually one way to handle this with CSS only, but it will work only if the DOM Elements are listed in a hirarchie.
You can trigger specific CSS Styles by setting up the wrapper CSS classes which will modify the Style in the Child Elements you want.
As an easy Example I will show you this Example.
It triggers the Menu Navigations though the Menu Class body.menu-open.
The Menu appears only if the class "menu-open" has been added to the body.
As the Body is the Major Element of all your Elements you can go in your CSS now and trigger your prefed "menu-open Style" with body.menu-open { .... }
I hope this will give you an Idea of CSS Animation and Triggering (or how is this called correctly?). I think something equivalent to this is your solution.
// Trigger Menus Toggle though CSS
$(document).on('click', '.magic_button', function(){
$('body').toggleClass('menu-open');
});
/* Global Hardreset */
* { padding:0px; margin:0px; }
/* Menu Wrapper */
.menu_wrapper {
display:block; height:50px; background:rgba(0,0,0,.3); position:relative; overflow:hidden;
}
/* Magic Button */
.magic_button {
display:block; width:40px; height:40px;
border-radius:50%; background: maroon;
position: absolute; top:5px; left:10px;
overflow:hidden; cursor:pointer;
}
/* Basic Setup and Styling */
.main_menu {
list-style:none; padding:0p; margin:0px;
display:block; text-align:center;
position:absolute; left:100%; top:0px; right:0px;
transition:all .3s; -moz-transition:all .3s; -webkit-transition:all .3s;
}
.main_menu li {
display:inline-block;margin:0px auto;
}
.main_menu li a {
background:darkseagreen; padding:18px 20px; color: #fff; line-height:50px;
text-decoration:none; font-family:Verdana; font-size:12px;
}
/*
* The CSS Statements for doing the Magic to Open / Close Menu.
* Notice: Acctually it would be generally better if you add thoose "check classes"
* into the Body, as the body is the major Element you can trigger from.
*/
body.menu-open .main_menu { left:0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class='menu_wrapper'>
<ul class='main_menu'>
<li><a href=#> First Link </a></li>
<li><a href=#> Second Link </a></li>
<li><a href=#> Magic Link </a></li>
<li><a href=#> Dungeon Entry Link </a></li>
</ul>
<div class="magic_button"></div>
</nav>
I am using uislider and it works great, but it sends the image across the entire width of the page. I attempted to change the javascript with no help. Finally I was able to get the right side of the page to pad properly using max-width: size of the image;
I've tried using min-width for the left side of the page, but it just doesn't seem to work.
CSS:
.banner {
float: center;
padding-top: 70px;
padding-left: 160px;
width: 100%;
max-width: 895px;}
.banner ul li {
float: left;}
.banner li {
list-style: none;}
Site is: mydiscountman.com if you want to see it functioning broken. I tried posting an image, but I do not have a reputation of 10 yet.
Thanks!
Banner code:
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//mydiscountman.com/mdm-content/themes/clipper/js/unslider.js"></script>
<div class="banner">
<ul>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest2.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest3.png" width="895" height="294" title alt="social-facebook-color">
</li>
</ul>
<script>
$(function() {
$('.banner').unslider();
});
</script>
float: center; is not a valid css property
padding is also considered as the width
eg if width is 100% and padding is 10% so the total width will be 110%
if you want to add some space to the left use margin which will give space without effecting the width
I'm building a dropdown menu for a project I'm working on, and I've come across some trouble. It is built so that the width and the style.left of each submenu is set by a JavaScript function that is called when the root-level menu items are hovered. When I hover these menu items it looks like this:
The submenu is clearly off by quite some pixels to the left. If I don't alter the style.left of the submenu I get the following instead:
Here the alignment is correct. The fault has occured in both Mozilla Firefox and Google Chrome for both Windows 7 and Linux, so it's not a platform related fault.
Here is the code that produces the error:
menu.js
function show_sub_menu(cath){
var menu_item = document.getElementById(cath) //cath is an integer passed to the function
var m_width = Math.floor(window.innerWidth*0.7*0.2); //Menu is 70% of window, each item is 20% of menu
menu_item.style.left = cath*m_width; //Set the style.left dynamically depending on what menu item is to be displayed
//This last line of code produces the error
}
menu.css
#m_wrapper{
position:relative;
width:100%;
}
#menu{
position:relative;
width:70%;
}
#menu li{
width:20%;
float:left;
}
#menu div{
position:absolute;
width:20%;
top:30px;
}
#menu div a{
position:relative;
display:block;
padding:5px;
}
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver=show_sub_menu('0')>Item 1</li>
<div id=0 onMouseOver=show_sub_menu('0')>
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
</div>
</li>
</ul>
</div>
I this seems very illogical, since m_width in the .js is, for my screen settings, 235px and m_width*cath is 0. I am fairly new with JavaScript, so help would be very appreciated!
First, you have your list-item closing early, and an ID that shouldn't start with a digit. So let's clean that up:
<div id="m_wrapper">
<ul id="menu">
<li onMouseOver="show_sub_menu('0');">
Item 1
<div id="s0" onMouseOver="show_sub_menu('0');">
Item 1.1
Item 1.2
</div>
</li>
</ul>
</div>
Next let's check out your CSS. Since we want to position your submenus relative to the main menu items, let's put position:relative; on the list-item itself to create a space from which we can position other stuff.
Now that we have a context where the submenu is aligned based on the top-left corner of your list-item, what we really need is for that menu to appear 30 pixels down from that corner - no left or right adjustment needed.
#m_wrapper{
position:relative;
width:100%;
}
#menu{
position:relative;
width:70%;
}
#menu li{
position:relative;
width:20%;
float:left;
}
#menu div{
position:absolute;
width:100%;
top:30px;
left:0;
}
#menu div a{
display:block;
padding:5px;
}
From here, your sub-menu should be positioned where you need it, but it's shown all the time. We'll take care of that by adding display:none; to #menu div and modifying the JavaScript to change display instead:
function show_sub_menu(cath){
var menu_item = document.getElementById("s"+cath);
menu_item.style.display = "block";
}
That should make your menu appear where and when you need it. I'll leave the disappearing act to you.