I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
Related
I have created a page with different background colors. What I'm trying to achieve is to change color fixed nav links on different sections. Like I've given custom class of light and dark respectively to the sections. And want to change color of nav links as the sections scrolls.
I'm a newbie to js and jquery, please let me know how can i achive this, I'm getting ideas to how to do, but i'm not able to execute it (or write it in a proper way)
This is what I have yet
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<div class="one m-light"></div>
<div class="two m-dark"></div>
<div class="three m-light"></div>
<div class="four m-dark"></div>
<style>
.nav{
position:fixed;
}
.nav li {
display: inline-block;
list-style: none;
height: 60px; /* should be the same as line-height */
line-height: 60px;
padding: 0 40px;
}
.nav-link {
color: #000;
text-decoration: none;
mix-blend-mode:difference !important;
}
.one, .two, .three, .four{
height:100vh;
width:100%;
}
.one{
background:#f1f1f1;
}
.two{
background:#050505;
}
.three{
background:#f4f4f4;
}
.four{
background:#030303;
}
</style>
<script>
$(document).ready(function(){
var scroll_pos = 0;
var darkSection = $('.m-dark')
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(darkSection > scroll_pos) {
$('.nav-link').css('color', '#000');
} else {
$('.nav-link').css('color', '#fff');
}
});
});
</script>
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I have a menu on the left side of a slider. The slider's height is in direct correlation to the size of the image file that it loads. I want the menu's parent element to be at an equal height to the slider at all time.
I tried to code this with CSS and I looked around on here and realized that doing it with CSS is impossible. So, I tried to code it with Java, but it isn't right.
Any help with this would be amazing!
--Update--
This part is an edit. I tried a few of the suggestions, however they are not working. The slider changes height as it responds to the width of the screen. So, when I drag it out, it will change and the menu is left shorter than the slider. If I max-height the slider, the width will not display at 100% of the 60% allowance.
I believe what I need is a snippet of jquery that:
- grabs the nav element
- detects the height of the .Slider
- makes the nav element the same height as the .Slider element.
I have tried the js code below, but it didn't work.
Does anyone know how to do this?
Here is the code:
window.jQuery( function() {
window.jQuery('nav').height(window.jQuery('.Slider').height ())
});
nav {
display: block;
float: left;
width: 40%;
height: 100%;
}
nav ul {
background: lightgreen;
}
nav ul li {
display: inline;
width: 100%;
height: 33.3333%;
margin-left: 0;
}
.Slider {
display: block;
float: right;
width: 60%;
}
<div id="wrapper">
<nav>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<div class="Slider">
Pics are here.
</div>
</div>
I think you just need a clearfix, or I don't understand the question. Try this:
.theParent:after {
display: block;
clear: both;
content: "";
}
not only this is possible with CSS, there are thousands of ways to do this. This is just one of those:
.wrapper {
background: lightgreen;
position:relative;
width:100%;
height:100%;
padding:0;
}
nav {
display: block;
float: left;
width:40%;
height:100%;
margin:0;
padding:0;
}
nav ul {
margin:0;
padding:0;
height:100%;
}
nav ul li {
display: block;
width: 100%;
}
.Slider {
display: block;
float: right;
width: 60%;
margin:0;
padding:0;
}
.Slider img {
width:100%;
height:auto;
}
.clear {
display:block;
clear:both;
float:none;
}
and some tiny changes in your HTML
<div class="wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="Slider">
<img src="http://www.open.edu/openlearn/sites/www.open.edu.openlearn/files/design-nutshell-homepage.jpg" alt="" />
</div>
<div class="clear"></div>
</div>
(pay attention to that .clear div, which is the main reason why you probably had problems)
IN this case, since I notices you used percentages, I also added responsive behaviors.
fiddle to see it in action
You can use a little Jquery to solve this situation.
Just before the tag, you can add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('nav').css('height','100%');
</script>
GOT IT!!!! So friggin' happy right now!!
var maxHeight = 400;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
I have used the following example of the JQUERY UI horizontal Menu:
How to make jQuery UI nav menu horizontal?
which works great on Chrome
but in IE 9 it looks horrible and it is not horizontal
do you have any idea what I have been missing?
my JQUERY sources:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
my css:
#menu li
{
width: auto;
clear: none;
background:blue;
margin-right:3px;
margin-left:3px;
margin-top:2px;
float: left;
}
.menuIconItem
{
cursor:hand;
}
.liMenuItem
{
background-color:transparent;
}
.menu
{
border: 0px !important;
background:D0E1F7 !important;
}
my code:
<ul id="menu" class="menu">
<li class="liMenuItem" title="1">
<a onclick="menuItemClicked('1');" class="menuIconItem">
<img src="1.png" id="img1">
</a></li>
<li class="liMenuItem" title="2">
<a onclick="menuItemClicked('2');" class="menuIconItem">
<img src="2.png" id="img2">
</a></li></ul>
Thanks :)
please refer the following link for more details,
Cross browser menu
it tells that for IE you have to make changes to the css file because some stuffs might not work in IE normally,
ul.dropdown ul li {
display: inline;
width: 100%; /* Width depends on the size of containing block */
}
try this hope it helps..
I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed
I have had good experiences with the Kendo UI menu by Telerik.
searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu
I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.
use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO