I am pretty new to coding and javascript and I have been trying to create a navigation block that slides in from the left when I click the logo in the top left-hand corner.
I seem to have got the sliding in and out element of the navigation working fine however, if I scroll further down the page and try to open the nav again, the browser window jumps back up to the top of the page rather than staying where it is. Weirdly it doesn't do it when I close the nav, just open it.
This is the script I am using at the top of my HTML to control the nav opening and closing:
<script>
function openNav() {
document.getElementById("expanded-menu").style.display = "block";
}
function closeNav() {
document.getElementById("expanded-menu").style.display = "none";
}
</script>
and this is the CSS styling the expanding nav:
.expanded-menu {
background-color: #f3f3f3;
height: 100vh;
position: fixed;
display: none;
width: 230px;
text-align: center;
z-index: 100;
overflow-x: hidden;
animation: animateleft 0.4s;
top: 0;
left: 0;
}
The animation effect I have on there doesn't seem to be working either. It just jumps out rather than sliding. But I imagine I need to open another question for that.
Thanks in advance!
EDIT: Here is the associated HTML too.
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png">
</a>
and...
<div class="contracted-menu">
<a href="#" onclick="openNav()">
<img src="images/nav icons/Cuttsy.png" class="cuttsy-small" alt="Cuttsy logo">
</a>
you need to disable the default action, you can use the preventDefault method demonstrated below or using javascript:void(0), like you use in your example.
You just used working link to "#". Normally if used with some existing ID it would scroll to it, but if empty it will just scroll to top.
function foo(e) {
e.preventDefault()
console.log('foo');
}
xxx
Your code works. Make sure you are triggering the functions correctly.
For example with a link a with the href attribute linking to a javascript function.
Open<br>
Close<br>
<div id="expanded-menu" class="expanded-menu">
My menu.
</div>
Some Content.
See this codepen for a working version.
Animation
Consider using css3 transitions as a way of displaying animations.
transition: left 1s;
Now, transition between display:none and display:block won't achieve anything, because there are no inbetween states. Instead I would suggest sliding the menu in with the use of the left offset.
You can hide a menu with the width of 200px with a left offset of -200px. (Left, top, right, bottom may be negative.) Transitioning the left offset to 0px will look like a transition.
See a working example in this codepen.
CSS
width: 230px;
left: -230px;
transition: left 1s;
JS
function openNav() {
document.getElementById("expanded-menu").style.left = "0px";
}
function closeNav() {
document.getElementById("expanded-menu").style.left = "-230px";
}
Related
I'm trying to create a responsive design for a practice website.
The situation is that the below menu-icon image is only displayed while width is less than 701 px. So it does that fine. But the problem is that, when menu-icon image is displayed, screen width less than 701 px, I click on the image and nothing happens. The onclick attribute "togglemenu()" does not seem to function. Can someone help please?
This is a live site:
https://moortje.github.io/HTML-CSS-Project-Bro-Code/
The menuList and menu-icon in question are at the very bottom.
Here is an HTML snippet.
<ul id="menuList">
<li>CSI</li>
<li>CHP</li>
<li>HCSS</li>
<li>JS</li>
</ul>
<img src="moortje2.png" class="menu-icon" onclick="togglemenu()">
<script type="text/javascript">
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if (menuList.style.maxHeight == "0px") {
menuList.style.maxHeight = "130px";
}
else{
menuList.style.maxHeight = "0px";
}
}
</script>
Here is a CSS snippet.
.menu-icon{
width: 25px;
cursor: pointer;
display: none ;
}
#media only screen and (max-width: 700px){
.menu-icon{
display: block;
}
#menuList{
overflow: hidden;
transition: 0.5s;
}
}
Well I went through the code and find out that togglemenu function is working properly and its even opening the menu. But you have given position absolute to ul tag and when you click on toggle image. It opens menu but at the top of page.
So click on image and scroll up to top and you will going to see your menu. You just have to adjust its position to open it below toggle menu button/image.
The problem is that you are setting max-height and max-width
Changing those properties doesn’t change the size of the element, only what its max bounds are.
Use width and height instead.
It's appear at the top of the page because of position: absolute
*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>
Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.
I am building a chat widget, which is minimized (collapsed and fixed to bottom of page) by default and then maximized when clicked.
It has a fixed height, and overflow-y: scroll. I want the scrollbar to start at the bottom and scroll upwards, but this is prettry problematic.
If I never collapse the widget, which I do with widget.toggle('blind') (JQuery), I can simply scroll with javascript on page load: using .scrollTop(), however, I want the widget to initially be collapsed. Using .scrollTop() on the collapsed widget has no effect! Furthermore, whenever I collapse/expand the widget, it scrolls all the way to the top.
Is there a library or do you have some hints to solve this?
You can do it like this:
Declare your chatView (widget) minimized height (5vh in my example) by default
When user wants to open the chatView (click in my example), you adding class (open in my example) and increase it's height (90vh in my example). With transition property - you get wanted animation.
Use mentioned jQuery method .scrollTop with needed container height (#chatView>div in my example), which insures it scroll to the bottom.
$(function(){
$("#chatView").click(function(){
$(this).toggleClass("open").scrollTop($("#chatView>div").height());
});
});
*{
margin:0;
}
footer{
height:10vh;
position: absolute;
bottom: 0;
}
#chatView{
width: 20vw;
background:red;
position:absolute;
bottom:0;
height:4vh;
transition: height 1s;
overflow-y:scroll;
}
#chatView.open{
height: 90vh;
}
#chatView>div{
background:green;
height: 95vh;
}
#chatView>figure{
height: 4vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<div id="chatView" >
<figure></figure>
<div ></div>
</div>
</footer>
I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:
#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}
The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens.
The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to.
I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.
I love how it works but can't stand the scrolling issue on smaller screens.
There may be some awkwardness in your idea that might just need a redesign, I certainly have never noticed a menu working like this.
But the jQuery code to scroll to the top is this:
$("html, body").animate({
scrollTop: 0
}, 600);
Where 600 is how long it takes in ms.
You'll have to wrap this in a click() function or something so it triggers when someone presses a menu option.
For example:
$('#menu a').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});
And of course all of this code should be wrapped in a $(document).ready() (basic jQuery setup)
I know you didn't mention jQuery in your question, but this is a popular approach to solving problems like this.
There is another way to achieve auto scroll on click using html only.
You just need to add an id to some div (the header maybe) and on the link you pass the #id to the href like so:
html
<div id="Header">your header</div>
Go to the top
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
I'd suggest to try out the scroll-behavior: smooth; it makes the transitions, well... smooth :D
Here you can find all the documentation you need about this solution
https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior
I've got a twitter bootstrap parallax template (purchased) - specifically regarding the nav bar, the way it currently works is when you click a nav menu item, the nav bar scrolls up with the rest of the site, then reappears further down the page and remains fixed at the top. What I'd like is for it to not scroll up in the first instance, and just remain fixed at the top the whole time.
This is the site in testing:
http://realestatemediafactory.com/test/
One thing I did try was wrapping the entire nav bar in the code below:
<div data-spy="affix" data-offset-top="160">
But the result was messy, and I figured it better to switch off/modify the code causing the scroll rather than try to cancel it out with more code...
Unsure whether this is controlled by css or jquery, so have not copied any of my code here... whatever's needed I'm happy to paste here.
Thanks guys!!
I don't know if I understand correctly your question and if this will help you
With firebug I tried to edit the css code
Search in your css code this selector and try to modify it so
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
background: url("../img/line_bg.png") repeat scroll left top rgba(0, 0, 0, 0.3);
border-bottom: medium none;
box-shadow: none;
filter: none;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
transition: padding 0.5s ease-in-out 0s;
width: 100%;
z-index: 1030;
}
With this modification, the navigation bar should always remain fixed at the top
Again: i've only tried with firebug so I'm not sure of the result
If this solution does not suit your needs, i apologize for making you lose time.
Mate thank you very much for your help - I did try that and it solved the problem for the most part, but there was still a positioning issue. I actually found there were two css classes for the header, one fixed and one scrolling, which were controlled by a script which switched between them depending on the position of the page. I turned off the script and that has solved the problem. The script I switched off is below. Thanks again for your help!
<script>
var navbar = jQuery('#navbartop');
var navbartop = jQuery('#topnavbar');
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 640) {
navbar.addClass("navbar-scroll");
navbartop.removeClass("navbar-static-top");
navbartop.addClass("navbar-fixed-top");
} else {
navbar.removeClass("navbar-scroll");
navbartop.removeClass("navbar-fixed-top");
navbartop.addClass("navbar-static-top");
}
});
</script>