Responsive navigation hidden on window resize.
Hi all
I have a demo here
http://www.ttmt.org.uk
and jsfiddle here
http://jsfiddle.net/VCPJu/
It's a simple horizontal li list navigation, on window resize the navigation hides and a menu button shows. Menu button then slides down the navigation that is now vertical.
If I make the window smaller open the slide down menu and resize the window bigger the navigation returns to the horizontal menu.
My problem is if I make the window smaller open the slide down menu and then close then resize the window larger the horizontal menu doesn't show again.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#menu_btn{
width:50px;
height:30px;
background:red;
display:none;
color:white;
text-align:center;
}
#menu_btn:hover{
cursor:pointer;
}
nav{
margin:50px;
display:block;
}
nav ul{
display:block;
overflow:auto;
background:#eee;
}
nav ul li{
display:inline;
}
nav ul li a{
font-family:helvetica, sans-serif;
float:left;
display:block;
padding:5px;
background:#aaa;
text-decoration:none;
margin:0 5px 0 0;
color:red;
}
#media only screen and (max-width:500px){
#menu_btn{
display:block;
}
nav ul{
display:none;
}
nav ul li{
display:block;
}
nav ul li a{
float:none;
margin:0 0 5px 0;
}
}
</style>
</head>
<body>
<nav>
<a herf="#" id="menu_btn">Menu</a>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<script>
$('#menu_btn').click(function(){
$('nav ul').slideToggle();
})
</script>
</body>
</html>
You're going to have to use some javascript to detect the screen size and reset nav ul{display: block;} ... the reason why is because when you're firing off your jquery it is applying the style DIRECTLY to your element making your internal CSS not want to render.
EDIT::: here is probably an easier solution by using class http://jsfiddle.net/Pkk2h/
This is an old question, however I came across it whilst looking for a solution to the same problem as it was occurring to me, I wanted to add a new answer as the one that was marked as the accepted answer isn't completely true. Yes, the Jquery applies the display property directly to your element, however you do not need to apply the display element again using Jquery, you can simply add a media query for when the screen size is to show your full screen menu and then set the menu element to display: block!important; which will over-write the Jquery display set. Hope this helps out any future readers with this problem, if the author of the question is still active, I assume you would accept my answer.
#media only screen and (max-width: 950px){
#nav {
/* Apply your responsive menu for screen sizes smaller than 950px */
}
}
#media only screen and (min-width: 951px){
#nav {
display: block!important;
}
}
Related
Trying to make the top nav bar stick while scrolling like the main nav does when scrolling, and need to add social media icons to the left of the top bar. Website is http://www.stephensengineering.com/stephens33/ any help is greatly appreciated. :)
i tried adding position: sticky but no luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
</body>
</html>
To make the top black navbar stick to the page when user scrolls down,
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
This will place the element on top of the page when user scrolls, but you will have a new problem. The black navbar now overlaps the slidein Main menu that appears when user scrolls. So, you will need to place the slidein Main menu below the top black nav bar. This can be achieved by setting:
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
Adding social icons will need additional markup in your HTML code.
curtain effect
Hello I need to make this effect in a photo viewer, I have no idea how to make it, please any help?
If we assume there are two layers, top layer has color, bottom layer has greyscale we can achieve the desired results. Here is an example using a single HTML file and two image files. The image files are identical except one is color, the other is greyscale. We use CSS for position of the elements and z-index order, and use jquery for mouse event handling to reduce the size of the top layer giving a clipping effect. The only other piece I can tell is changing the mouse pointer to some arbitrary horizontal rule, and vertical rule to give a curtain effect...
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.picture-container
{
position: absolute;
}
#picture-container-color
{
z-index:2;
background-image: url("flower-color.jpg");
background-repeat: no-repeat;
background-color: red;
width: 500px;
height: 500px;
}
#picture-container-grey
{
z-index:1;
background-image: url("flower-grey.jpg");
background-repeat: no-repeat;
background-color: yellow;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="picture-container-color" class="picture-container"></div>
<div id="picture-container-grey" class="picture-container"></div>
<script>
var mousedown = false;
$(".picture-container").mousedown(function(event) {
mousedown = true;
});
$(".picture-container").mousemove(function(event) {
if (mousedown === true) {
$("#picture-container-color").width(event.pageX);
$("#picture-container-color").height(event.pageY);
}
});
$(".picture-container").mouseup(function(event) {
mousedown = false;
});
</script>
</body>
</html>
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
Look at this Link
It's seemed to be a Chrome bug. But it's fixed in Canary-Version. So I think it's just a temporary problem.
I need to display a MenuBar on the Liferay Portal Page (A menuBar which will be common to all portlets in that page)
For this, I have created a custom Theme, and modified the navigation.vm file under the templates folder.
I have added this below MenuBar code inside the navigation.vm file and deployed it to the server
<html>
<head>
<title>Menu Bar Using CSS</title>
<style>
.menu ul
{
list-style: none;
}
.menu ul li
{
display: inline;
}
.menu ul li a
{
/*Increase Clickable Area*/
padding: 8px;
padding-left: 15px;
padding-right: 15px;
/*Remove the Underline for the Link*/
text-decoration: none;
color: #000;
background: #ccc;
}
/*On Mouse Over the Link*/
.menu ul li a:hover
{
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>
I have put all these code under the navigation.vm file under my Applied Custom Theme, but it didn't worked (I mean the Menu Bar is not shown on the Portal page)
Please let me know if I am doing anything wrong.
navigation.vm does not contain <html>,<head> and <body> tags, these go inside the portal_normal.vm or if the page is a pop-up then portal_pop_up.vm. This file (navigation.vm) just helps in displaying the pages and is included inside the portal_normal.vm file.
So try moving your code inside portal_normal.vm for the menu-bar.
Hope this helps.
I'm looking to make an image sprite fade in after a certain amount of time. (please see code below)
The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.
How do I make all of these work together?
Thanks for any help you can give!
K
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
html, body {margin:0px;}
a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}
a.LaunchCourse:hover{
background-position: 0px -60px;
}
a.LaunchCourse:active{
background-position: 0px -120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>
</head>
<body>
<a class="LaunchCourse" href="wbt.htm" ></a>
</body>
</html>
I think what you might want to try is putting this:
$('.LaunchCourse').hide();
setTimeout(showImage, 5000);
function showImage() {
$('.LaunchCourse').fadeIn(1000);
}
instead of this:
$('.LaunchCourse').delay(1500).fadeIn(1500);
That way, you start by hiding the image... and then you just fade in with however much delay you want in that fadeIn(number) part.
Why not use javascript's setTimeout function?