I was trying to create following scroll navigation with ionic, but somehow navigation is not working and style is not quite right. Could anyone help/guide me on what to use?
This is want I want:
This is what I have so far, horizontal scroll-able list, but above is more like navigation bar, item moves to center when you touch/select it.
When first element is active left side of the list should stay empty. They should scroll like navigation.
So far I have horizontal list but scrolling active one to center is not working.
<ion-scroll direction="x" class="wide-as-needed">
<div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
{{type|uppercase}}
</div>
</ion-scroll>
directive is simple anchor navigation and trying to navigate to element itself so far not luck, it will navigate to itself but only makes it visible not center of navigation list: https://docs.angularjs.org/api/ng/service/$anchorScroll
Also this angular $anchorScroll is designed to vertical scrolling not horizontal...
TabbedSlideBox can also be used, but this plugin also doesn't have tab scroll to center when active
Update for future reference I will leave it here.
You can try to use this
http://demo.jankuri.com/ngSlimscroll/
but for me creating custom directive from this helped.
function center() {
var currentElement = document.getElementById("active");
currentElement.className = "center-menu";
var nav = document.getElementById("nav");
var navWidth = document.getElementById("nav2").offsetWidth;
var margin = 0;
for(var i =0; i<nav.children.length; i++){
if(currentElement == nav.children[i]){
console.log(nav.children[i]);
break;
}else {
margin += nav.children[i].offsetWidth;
}
}
nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}
css
nav {
background: #9df0e8;
overflow: hidden;
border-bottom: 8px solid #40b5a2;
border-top: 2px solid #40b5a2;
width: 80%;
margin: 0 auto;
}
nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }
nav ul li { float: left; }
nav ul li a,
nav ul li span {
display: block;
background: #9df0e8;
color: #345661;
text-decoration: none;
padding: 1em;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }
.arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #9df0e8 transparent transparent transparent;
display: none;
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.center-menu .arrow{display: block;}
Related
I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.
Here is an image of how it looks when window is maximized:
Here is an image when the window is resized:
Here is an image of what I want the page to look and function like:
Issues:
As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
When menuis clicked, I want the nav to dynamically display the other links.
Here is what I have tried so far: https://jsfiddle.net/hudnybux/
Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.
<div id="header-main">
<div id="nav-trigger"><span>Menu</span></div>
<nav id="main-navigation" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
<!--<nav id="nav-mobile"></nav>-->
</div>
Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0.
width: 0;
height: 0;
Edit:
I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp. You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.
https://jsfiddle.net/qnco3x7e/8/
You will need to add another media query
#media all and (max-width: 460px) {
nav#main-navigation li {
display:block;
border-bottom: 1px solid #fafafa;
}
}
You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!
The Strategy
Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
Show everything by default; use display: none only on screen sizes you don't want to show something on.
JSFiddle
$(document).ready(function() {
$("#main-nav-mobile-trigger span").click(function() {
$(this).toggleClass("open");
if ($(this).hasClass("open")) {
$("#main-nav").addClass("open").slideDown(250);
} else {
$("#main-nav").removeClass("open").slideUp(250);
}
});
});
.pageOverlay {
width: 900px;
margin: 0 auto;
}
/******************/
nav {
background-color: #fefefe;
/*NAV COLOUR*/
padding: 10px 0;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
nav ul li a {
color: #a4a4a5;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
padding: 0 2px;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: white;
padding: 10px 20px;
}
/****************************************************************/
/* Menu CSS which pops up when window is resized */
#main-nav-mobile-trigger {
text-align: center;
}
#main-nav-mobile-trigger span {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
text-transform: uppercase;
}
#main-nav-mobile-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #e3e3e3;
border-right: solid 10px transparent;
}
#main-nav-mobile-trigger span:hover {
background-color: #e3e3e3;
}
#main-nav-mobile-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent;
}
#media all and (min-width: 901px) {
#top-nav {
text-align: right;
}
#main-nav {
text-align: left;
}
#main-nav-mobile-trigger {
display: none;
}
}
#media all and (max-width: 900px) {
#main-nav:not(.open) {
display: none;
}
#main-nav ul {
display: block;
}
#main-nav li {
display: block;
border-bottom: solid 1px #e3e3e3;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav a {
padding: 10px 30px;
}
#main-nav a:hover {
background-color: #e3e3e3;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
<nav id="top-nav" role="navigation">
<ul>
<li>Join / Log In</li>
<li>Help</li>
<li>Shop</li>
</ul>
</nav>
<div id="main-nav-mobile-trigger"><span>Menu</span></div>
<nav id="main-nav" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
</div>
<!-- pageOverlay closed-->
The HTML
I removed your container <div>s (#header and #header-main), as they serve no purpose as far as layout is concerned.
There are now only three parts to the header area. In order they are:
#top-nav - Join/Login, Help, Shop
#main-nav-mobile-trigger - MENU button
#main-nav - Stretches, Mobility, Posture
The JavaScript
When the MENU button (#main-nav-mobile-trigger span) is clicked:
Toggle its .open class.
If it has the .open class,
Add #main-nav's .open class.
Otherwise,
Remove #main-nav's .open class.
The CSS
You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation, which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav. Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
For big screen widths (#media all and (min-width: 901px)):
Align #top-nav to the right and #main-nav to the left.
Hide the MENU button.
For small screen widths (#media all and (max-width: 900px)):
If #main-nav doesn't have the .open class, hide it.
Display the menu items in #main-nav horizontally.
I hope this helps you. Best of luck with your future adventures in front-end development!
I have problem with JavaScript, onmouseover and onmouseout events. When mouse comes to bottom edge of desired element, mouseover and mouseout effects start blinking. Here is example:
function menuHover(field)
{
var img = field.nextElementSibling;
var height = img.height;
var bottom = 0 - Math.floor(height / 2);
bottom += 'px';
img.style.display = 'block';
img.style.bottom = bottom;
}
function menuHoverOut(field)
{
var img = field.nextElementSibling;
img.style.display = 'none';
}
DEMO: https://jsfiddle.net/index23/ety2z0zu/9/
Is there solution for this?
CSS would be the recommendation. But here is the answer for your question https://jsfiddle.net/ety2z0zu/11/. Please remove img.style.bottom = bottom; from your JavaScript
function menuHover(field) {
var img = field.nextElementSibling;
var height = img.height;
var bottom = 0 - Math.floor(height / 2);
bottom += 'px';
img.style.display = 'block';
// console.log(height);
}
function menuHoverOut(field) {
var img = field.nextElementSibling;
img.style.display = 'none';
}
a,
a:link {
color: inherit;
text-decoration: none;
}
body {
background-color: #2a4b8b;
}
header nav {
text-align: center;
position: relative;
}
.main-nav {
margin: 0 auto;
padding-right: 25px;
list-style: none;
display: inline-block;
}
.main-nav li {
float: left;
margin-right: 23px;
display: block;
padding-top: 50px;
-webkit-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
-moz-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
position: relative;
}
.main-nav li a {
display: block;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 3px;
border-bottom: 5px solid #6173ad;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.hover-img {
display: none;
position: absolute;
left: 0px;
width: 100%;
height: auto;
}
<header>
<nav>
<ul class='main-nav'>
<li>
<a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
<img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
</li>
<li>
<a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
<img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
</li>
</ul>
</nav>
</header>
Try to rewrite your code to use css possibilities of mouse tracking.
For mouse - use style :hover
To show image under element - use css directive content with after
Look at this Demo
Why not simply use css?
By using the :hover pseudo class on the parent LI element, you can control the visibility of the image, like so:
.main-nav li img.hover-img {
display: none;
}
.main-nav li:hover img.hover-img {
display: inline;
}
See it in action:
https://jsfiddle.net/vugjp340/1/
And maybe it would be nicer with an opacity transition.
Why are you doing that effect in javascript and not just with css?
Three little changes here:
1. remove padding-top from .main-nav li
2. add padding-top from .main-nav li a
3. add:
.main-nav li:hover img.hover-img {
display:block;
}
Now everything is almost the same except you can click on the "entire" button which has now more height like it is visible. https://jsfiddle.net/ety2z0zu/16/
I think I have found out what is a problem. Problem could be in image that appears on mouse over. When image appear it come over a tag, and browser fire mouse out events, then image hide and browser fire mouse over event and so on in the loop.
Thank you all for helping.
I am having some trouble changing the color property of a link when its class is changed. Here is the code
<div id="information">
<ul class="pagination">
<li><span>Administration</span><small>Learn Site Administration</small></li>
<li><span>Management</span><small>Learn Access Management</small></li>
<li><span>Dashboard</span><small>Learn Dashboard Functions</small></li>
<li><span>Visitors</span><small>Learn Visitor Management</small></li>
</ul>
</div>
This is the html code i am using to create my list with no inline style or anything else.
Now here is my css.
#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
list-style: none;
margin: 0;
padding: 0;
}
#information ul.pagination{
float: left;
list-style:none;
padding:0;
margin:0;
width:246px;
height:350px;
background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
padding:5px 0 0 5px;
margin-bottom:-5px;
}
#information ul.pagination li a {
width:270px;
height:85px;
background-repeat:no-repeat;
background-position:left -85px;
background-image:url(../images/thumb-sprite.png);
text-decoration:none;
display:block;
color: #464646;
}
#information ul.pagination li.current a {
background-position:left top;
color: white;
}
#information ul.pagination li a span {
font-size: 26px;
line-height: 1.2em;
display: block;
padding: 14px 0 0 0;
}
#information ul.pagination li a small {
display:inline-block;
color:#428301;
background-repeat:no-repeat;
background-position:right -80px;
background-image:url(../images/arrows.gif);
padding:0 17px 0 0;
font-size: 10px;
}
#information ul.pagination li.current a small {
font-size: 10px;
color: #89C100;
background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
padding-left:40px;
}
Currently no element have a class .current so I add class to first element through script and , here is the script
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});
The dilemma here is that, the background of the li with class = current is changing correctly but the color property of the element is not changing, which you can see in css property of ( #information ul.pagination li.current a ), i dont know whats wrong with it, but i have been stuck for so long finally i decided to ask of forum.
Please note that the script is working fine because background is changing perfectly. Even at the start of webpage li with current class has the color #fff but it doesnt work afterwards, any help will be much appreciated.
P.S Here is the URL in which you can see it works fine at start but after that background image positioning changes but color does not
Its working perfectly. as you can see in JSFiddle
http://jsfiddle.net/banded_krait/m9kV9/1/
if it's still not working in your code try to put !important to that css.
#information ul.pagination li.current a {
background-position:left top;
color: red !important;
}
for the subtitle color put this css
#information ul.pagination li.current a small {
color: red !important;
}
I also updated my jsfiddle. please see.
I changed the color from white to red to see that it's working or not.
It works fine in this DEMO
I have added
#information ul.pagination li.current a {
background-position:left top;
background-color: black;
color: white;
}
So that it is easily visible
Updated Answer
try to override the default link color by specifying the following property
#information ul.pagination li.current a:active{
color: #FFF;
}
try
#information ul.pagination li.current a {
background-position:left top;
color: red;
}
your code is working fine , the thing is you are using color: white;
so link is not showing .
I don't see any error here
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});
I have a problem with my dropkick menu for my responsive website. When the site enters iphone size it changes to this dropkick menu using dropkick.js, it's a dropdown.
My HTML:
<div id="mobilemenu">
Menu
</div>
This above code is only visible if you view the site in 320px width.
My Javascript:
<script type="text/javascript">
$(function () {
var pull1 = $('#pull');
menu1 = $('ul.menuresponsive');
menuHeight = menu1.height();
$(pull1).on('click', function (e) {
e.preventDefault();
menu1.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu1.removeAttr('style');
}
});
});
</script>
I don't really know much about Javascript, this was taken from a tutorial.
My CSS for when the site is in 320px:
/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }
/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }
As it looks now, the menu is constantly open as shown below, I would very much like it to be closed by default but I can't seem to find a solution.
My menu is rendered as a <ul> and <li> dynamically inside the <div id="mobilemenu">
In the tutorial you link to the demo example has two media queries - one for 515px and one for 320px.
The css for the 515px will be inherited by the 320px one and it contains the code you need to close the menu I think.
Try adding this code into your media query:
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
I have a menu like this
Home About Privacy Shopping Contact Us
I want to show this menu in the center of its container (whatever the width of the container is). I can apply 20% width to these list-item but then some list-item has more spacing in between and others have little due to different sizes of texts
<div id="container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Privacy</a></li>
<li><a>Shopping</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
Try using Flex Box layout (Demo):
#container ul {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal
}
#container li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
border: solid 1px #000;
text-align: center
}
This method allows you to use your 20% width and center the items in your container, all while keeping the same width of each item.
ul {
list-style-type: none;
width: 700px;
margin: 0 auto;
}
#container {
width: 800px;
background: #CC9;
}
li { display: block;
float: left;
width: 20%;
margin-left: -5px;
background: #399;
text-align: center;
border: solid black 1px;
color: white;
}
which you can view here... http://jsfiddle.net/r6Wwf/15/
I added a negative margin-left to compensate for the border I added so you get a better visual of how it works. I also set the width of the ul to 700px. This could be any width.
To set the entire menu in the center of a container add this to your css:
ul { margin: 0 auto; }
And then add a width to your container. This is all in the fiddle. You can set the width of the container to whatever you want. I have it at 800px.
If you're okay adding a containing element (nav is probably the most suitable), here's a good solution for you:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Shopping</li>
<li>Contact us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
float: left;
position: relative;
left: 50%;
padding: 0;
list-style: none; }
nav ul li {
float: left;
position: relative;
right: 50%;
margin: 0 10px; }
nav ul li a {
padding: 5px;
display: block; }
Preview: http://jsfiddle.net/Wexcode/bKH79/
If you want each li element to be 20% of the width of the container, just set the container to have width: 100% and set each li element to have width: 100% (you would also need to remove the margin from the li and add text-align: center).
See: http://jsfiddle.net/Wexcode/bKH79/2/
The best way to horizontally center elements in CSS is to give it a specific width, and then give it margin: auto;. Here is an example I made real quick. You can see the ul (blue border) has a width of 300px and it sits centered inside the 500px container (red border): http://jsfiddle.net/r6Wwf/4/. You can space the list elements however you would like.
What is the container width exactly..?
ok Let me assume its 960px now give width to your ul element so that the list item will not go in second line.Suppose it has taken 600px now in this case your CSS for making menu items in CENTER will be:
.container{width:960px;}
.container ul{width:600px;margin:auto}
Hope it'll solve your problem.
Pretty simple.
div#container {
width: 300px;
margin: auto 0;
}
div#container li {
display: inline-block;
padding: 15px;
}
You would definitely need to write some JavaScript to make this happen. This is how I would do it... http://jsfiddle.net/rb39A/1/
By using a little bit of jQuery you can get the dynamically sized containers you're looking for.