I am currently using the MeanMenu JQuery plugin to create a responsive navigation for my website and I would like to know how can I add in a title name to the navigation once it's in responsive mode.
My JQuery skills are not that strong and I'm unsure.
Demo: http://www.meanthemes.com/demo/meanmenu/demo.html. View it in responsive, and there's 3 bars on the right that acts as a menu drawer. I would like to add a title next to the bar.
Most of the responsive part of the navigation is written in JQuery, which is something new to me.
Would appreciate some help on this.
Link: http://jsfiddle.net/dDRZe/4/
Thank you.
You could maybe do something like this:
Javascript
$(window).resize(function() {
if (window.innerWidth < 480) {
$('.mean-bar').before('<div class="myDiv">content</div>');
}
});
CSS
.myDiv {
color: #fff;
position: absolute;
top: 0px;
left: 20px;
line-height: 40px;
}
Updated simpler solution
Add to the top of your page:
<div class="myDiv">Content</div>
CSS to show/hide it:
.myDiv {
color: #fff;
position: absolute;
top: 0px;
left: 20px;
line-height: 40px;
display:none;
}
#media screen and (max-width:480px){
.myDiv {
display:block;
}
}
That will give you a div which you can put whatever title you want onto and style it how you want with CSS.
This is how I solved (IE >= 9)...
#media screen and (max-width:480px){
a.meanmenu-reveal::after {
content: "menu";
font-size: 16px;
position: absolute;
text-indent: 0;
left: -40px;
bottom: 12px;
}
}
Related
I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );
Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});
I'm trying to design a website for my company, but I can't figure one thing.
I want navbar fixed while people scroll down the page
like this one
http://www.quintessentially.com (as you can see, the navigation bar gets fixed when you scroll down the page )
I'm using jQuery 1.8.3.min.js
and this code
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').addClass('absolute');
}
else {
$('.nav').removeClass('fixed');
}
});
and the css is like this
header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}
.fixed{
position: fixed;
top: 0; }
But I don't why it isn't working.
Does someone know how to fix it?
Thanks !! :D
ps: sorry about my bad english.
You need to reverse the logic.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').
.removeClass('absolute')
.addClass('fixed');
}
else {
$('.nav')
.removeClass('fixed')
.addclass('absolute');
}
});
Added a removeClass as well to prevent any class priority issues.
I am following MVC approach where you can keep some contents static .i.e. header , footer , sidebar etc using layout.In my view, i want to make header and side-bar fixed while user scroll-down the page. Any help ?
Use position : fixed for your header div and sidebar div.
You could definitely cleanup the sidebar and fixed positioning, but this demo seems to work (quick mockup only). You'd need to add the CSS to your stylesheet, and then create partials for the header, sidebar and main content window.
In the CSS (below), you'd need to adjust some properties to make sure everything aligns properly as you're setting up your design.
* { box-sizing: border-box; }
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding:10px;
background-color: #eee;
border-bottom: 1px solid #ddd;
}
.container { padding-top: 32px; } /* Adjust this value based on height of .header */
.main {
width: 70%;
margin-left: 30%;
padding-left: 20px;
}
.sidebar {
position: fixed;
top: 41px; /* Adjust this value based on height of .header and any additional padding */
bottom: 0;
width: 30%;
overflow-y: scroll;
}
I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">