I have created this nav with a div who has those li inside
<nav>
<div class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
</div>
</nav>
Also, I have created a "burger" div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
However whenever someone is on phone and clicks on it I want to have one more li called "Google Maps".
Is there anyway I can do this using Javascript?
The simplest way of achieving this is via CSS - having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.
You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query.... then clicking the "full-screen" link to toggle to full screen and now the maps link will not show - because the width is wide enough totrigger the media query.
Also note that li's are children of a ul element - not a div.
And that rather than creating two seaprate nav lists - one for phone and one for not-phone... it is better to have a single list and style it accordingly for different viewports.
#media only screen and (min-width: 768px) {
.maps-link {
display: none;
}
}
<nav>
<ul class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
<li class="maps-link">Google maps</li>
</ul>
</nav>
Related
So I'm fiddling around with this design I found on http://cssmenumaker.com/menu/responsive-flat-menu but I'm having a bit of an issue when the navbar is scaled down in the browser. So full width of the browser it looks like img 1 below....and when scaled down it turns into a hamburger menu with a dropdown as depicted in img 2. The problem is it repeats since I added an extra li tag to add in 'Super Awesome Menu'. So, my question is how to remove that extra repetition in img 2(it should retain in in full width like img 1).
I tried some of the simple removeclasses but they did not work. I'm sure it's super simple and I'm just failing to see it.
I stuck the code up here (since for whatever reason it's a huge pain to indent jquery on here)
http://codepen.io/anon/pen/NxZLKo
<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li>Super Awesome Menu</li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->
You can do that using media queries. Put this line of code in you css and you are good to go.
#media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }
It will hide the first child in this case super mega awesome if you do li:nth-child(2) it will hide Home etc.
I think there's no extra link "Super Awesome Menu"
It's just the name of your menu as you configured it on lines 5 & 73 in Javascript Section of your code snippet. It's your title parameter
$("#cssmenu").menumaker({
title: "Super Awesome Menu",
format: "multitoggle"
});
Just let it empty or find another name !
Try this css
#media screen and (max-width: 680px) { #cssmenu ul.open
li:first-child{
display:none !important; } }
This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!
I have header (100% width, 277px height), and in header I should have background image, x-repeated, which will stay in same position (x axis position), on all resolutions (1024+ actually, no need for mobile version so far). This is how it should look on all resolutions:
http://i.imgur.com/5rT4Xi9.png?1 (see profit, and cloud line under it - that's right position)
However, by changing resolution, background image changes it's position too ...
HTML:
Webopps
<h2>Helping you profit</h2>
<h3>from the Web</h3>
</div>
<div id="menu">
<ul>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="has-sub">
The market
<ul class="submenu">
<li>
Mainstream
</li>
<li>
Adult
</li>
<li>
Niche
</li>
</ul>
</li>
<li>
Downloads
</li>
</ul>
</div>
</div>
CSS:
header {
width:100%;
height:277px;
z-index:999;
position:relative;
background-image:url(images/clouds2.png);
background-repeat:repeat-x;
background-position:-133px 0px;
}
http://jsfiddle.net/kF7Br/
Test link: http://bybyweb.com/webopps/
I have tried with media queries (not so smart solution, you can see at the bottom of my css, but without success), i have thought about js/jquery solutions, but have no idea how to make it... I am opened to all kind of hacks/solutions (css, jquery, html structure changes).
You can use this code :
function bgPos(){
var w = $(window).width() - $('#header-content').width();
w = w/2;
$('#header').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');
But you will have to do some maths to place it well.
Fiddle : http://jsfiddle.net/kF7Br/1/
Did you try setting
background-attachment:fixed;
Also, if you dont need its position to be relative, set it to absolute.
For the desktop version, I suggest using the top and center keywords instead of using pixels. This approach looked good until about 400px wide, at that width you could use a responsive media query to override to a pixel value like you had before.
background-position:top center;
I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.
Is it possible with pure css or really simple way to transfer nav ul menu as dropdown list when body width is smaller than given (media css) (mobile phones etc)
<nav>
<ul>
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
Assuming: I want to display it normally, but when on mobile with narrow screen, want to display it as dropdown menu - same as select form.
[edit]
something like: http://themewich.com/aware/ -see the menu when resized.
I don't know what you want exactly but this maybe can help you .I hope
<nav>
<ul> Test
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
ul li{
display:none;
}
ul:hover li{
display:block;
}
jsFiddle
You can detect the screen width using javascript, and if the screenwidth is too small, you can change the list to a dropdown menu using tags. Google "javascript innerHTML" for more info how to do this.
If you look at the example URL with CSS disabled (or view the source), you will see that both types of navigation are present (nested list and form select). The page is using media queries to determine which element to hide: narrow devices will hide the list version while wide devices will hide the form version.