So i want to make this responsive menu. On Desktop it looks like this:
And on Mobile it should look stacked overlapping everything under it but not pushing it down. So not like this:
(Before button pressed)
(After button pressed)
You can see that the Slideshow below is pushed down and the obvious misplacement of the menu on the button in general.
Plese help me to fix this, im a poor backend dev.
Here is my code:
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left
}
}
<div class="mainheader">
<div class="logo">
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
Unternehmen
Leistungen
Referenzen
Kontakt
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="bigicon" src="../bilder/menu.png">
</a>
</div>
</div>
So the anwer to fix the issue was to set the responsive menu class to absolute, also you have to use right: 0; so it stays in place.
After that i figured out that i could just move the menu links down since they are also absolute now in order to prevent them from overlapping the button.
Thanks for the effort of helping everyone ;)
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a {
float: none;
display: block;
text-align: right
}
}
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
<img class="bigicon" src="../bilder/menu.png">
<span>
Unternehmen
Leistungen
Referenzen
Kontakt
</span>
</div>
</div>
with out looking at whole page code here is what you need to do or something I would always check before going forward.
for css to work properly add this meta tag in head <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
secondly menu is something that should be stacked higher up on the interactive and display layer so it does not mess with other elements on the page. One way of doing this is to place the tag at the bottom of everything last on page (remember to css absolute positioning on the menu div) or zoom it up like +10000 should do.
please try not to add responsiveness after the fact like when user clicks this will create whole lot of problem going forward as computed vs initial values collide. Leave things to css as much as possible. It is good code from w3school follow its instructions as stated.
For the positioning issue calculate height of the image;
it is actually your icon that is being positioned every thing else is relative to where it should be. so move your icon as first item then every other anchor tag below it. this should solve your positioning issue.
Add z-index property to .menu.responsive class.
Related
https://github.com/UneSaltedFish/landingpage.git (github link to view full html/css/js)
Here I am developing a landing page, and On the right bar vector picture, I used a hover effect(When I enter this pic, It will change to another picture and there will have two clickable text on it.)
<div class="rightCon">
<img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
and it is looks like this.
img
Here is the css code:
a{
color:black;
text-decoration: none;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:150px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.text{
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 30px;
}
and the js code
function right2(){
document.getElementById("right").src = "right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
The problem is the onmouseenter is work when go in to right area, but when I go in to right1 and right 2 area, onmouseleave is work, which I don't want to. I want this hover only work when enter right and leave right.
After I search online, I try to make div as a child of img but I don't know How to make children of a img.And I am stuck here.
Thank you in advance for all help.
If you want the events to be on the image and the other siblings, you should put the event listeners on their parent. Now anywhere you hover in the parent, the mouse will remain.
<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
<img o src="right.png" alt="right" class="right" id = "right">
...
Other option just pure css
.rightCon .details {
display: none;
}
.rightCon:hover .default {
display: none;
}
.rightCon:hover .details {
display: block;
}
<div class="rightCon">
<img class="default" src="http://placekitten.com/g/400/200">
<img class="details" src="http://placekitten.com/400/200">
<div class="default">FOOOOOO</div>
<div class="details">Meow</div>
</div>
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;
}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
All,
Using ONLY javascript and CSS, I need to create a responsive menu. The menu must also supports one level sub-menus.
Due to the memory limitations of the embedded hardware, I cannot use external libraries/frameworks.
I have browsed as much as I could. The examples I have found don't quite address my problem.
If the menu is responsive, it does not support sub-menus ...
If it supports sub-menus, the submenus expand within the menus, instead of replacing them ...
If it does everything I need, then it is in jQuery, and I cannot use it ...
I have been 'piecing' together snippets of code (http://codepen.io/vpappano/pen/NRLRWJ)
However, I am now stuck with the following problem. Because I embedded the submenu (id="myDropdown")
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
within the main menu (id="myTopnav"), I don't manage to display the submenu when in the minimized state.
The only solution I could come up with is to duplicate the submenu (id="myDropdown2")
<div class="dropdown-content" id="myDropdown2">
Link 1
Link 2
Link 3
</div>
which, of course, is "so wrong on so many different levels" ... :-)
Can you improve my code in such a way that I am using only one occurrence of the submenu? A link to a JSFiddle, CodePen, or similar would be extremely helpful ...
Please NO jQuery. I can only use javascript and CSS. However, if you are aware of a little js-css-only library that achieves what I am looking for (MIT license), that will also do the trick ... :-)
Thank you so much ...
Vincenzo
Here is a "not so simple" demo of responsive navigation taken from w3schools, and modified by me to show a simple submenu behavior.
The most important part here to take note is that you might have to create a function to close other submenus, when you open another one and edit the non responsive CSS.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSubMenu() {
var x = document.getElementById("submenuNav");
if (x.hidden === true) {
x.hidden = false;
} else {
x.hidden = true;
}
}
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact
<ul class="subnav" id="submenuNav" hidden >
<li>Sub Menu1</li>
<li>Sub Menu2</li>
<li>Sub Menu3</li>
</ul>
</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.
Here is my code:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
Link
Link
Link
Link
Link
</div>
<!--#menu-items-->
The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.
Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.
The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.
Any help would be really appreciated!!!
Thanks so much.
Try this :
#media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}
Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.
What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: (JSFiddle)
CSS:
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
.collapsed {
display: none;
}
}
#media only screen and (min-width: 681px) {
.collapsed {
display:block;
}
}
JS:
function toggle_collapsed_class(e) {
$(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast', function(){
toggle_collapsed_class(e)
});
} else {
$(e).removeClass('collapsed').slideDown('fast');
}
};
I'm using jQuery slideToggle function and the media queries.
The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.
If I do not click on the toggle link, and resize the window back to large size, it works fine.
Demo to see the problem:
Please check the demo here, where you can see the problem:
http://jsfiddle.net/3Jj7J/
Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.
Here's my code:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
add on window resize event handler :
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.show();
}
});
jsFiddle : http://jsfiddle.net/3Jj7J/1/
update: this is alternative solution (just remove inline display property, so it will use css rule).
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.css({'display':''});
}
});
DEMO
I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:
CSS:
#bar {
display: none;
color: #000000;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
#nav ul {
display: none;
}
.bar{
display: block;
}
}
To see for yourself (http://jsfiddle.net/hSZ7t/) What I've done is changed your CSS. Instead of you using:
.bar {
It's now:
#bar {