on my website MInGamez.com i have a line of text named Products i will later change that to Menu , but im having problems with it because i need that and the dropdown menu it has to be to the right with its pre-defined 35px; , so how would i be able to align my dropdown to the right?
JsFiddle
and because i have to add code with a js fiddle i will post my html down below ,
HTML
<!--start menu -->
<div id='cssmenu'>
<ul>
<!-- site logo -->
<li class='active'><a href='index.html'><span><img style="height: 35px;width:75;" src="images/logo_image.png" alt="website logo"/></span></a>
</li>
<!-- end site logo -->
<!-- search form -->
<li class="active"><span>
<div>
<form id="searchform">
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
</div>
<div id="suggestions"></div>
</form>
</div>
</span>
</li>
<!-- end search -->
<!-- drop down -->
<li class='has-sub'><span>Products</span>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a>
</li>
<li class='last'><a href='#'><span>Sub Item</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a>
</li>
<li class='last'><a href='#'><span>Sub Item</span></a>
</li>
</ul>
</li>
</ul>
<!-- end drop down -->
</ul>
</div>
<!-- end menu -->
Something like this?
I've added:
#cssmenu ul ul > li:hover > ul {
left: 190px !important;
}
Why don't you quite simply give the outter most div a position: relative; and then give the menu position: absolute; right: 35px; or whatever. That would make sure the menu stays afloat, right aligned, inside the confined boundaries of the outter most div.
Related
I created some classes for the menu items, so I can call upon them.
.dropdownBox {
display: none;
}
.dropdown li:hover > ul.dropdownBox {
display: block;
}
However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.
just update your CSS. Hope this will work for you.
.dropdownBox {
display: none;
}
.dropdown:hover + .dropdownBox {
display: block;
}
.dropdownBox:hover {
display: block;
}
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I have ul elements like below in my html
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
Now I want to use a button just below this ul. But when I put something like the code below it breaks.
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>
So is there any way I can put my button as a li element in order to get the exact same look(CSS).
Here's the fiddle for the same. The button should look like the ul element
Here is the code just add a button in a "li" element and remove bullet.
<ul class="nav" id="loadCategories">
<li class="sub-menu">
Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet">
<button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
</li>
</ul>
Also make the list-style-type to none
.no-bullet{
list-style-type: none
}
Here is a fiddle check it out.Hope it helps!! link
Did you try width=100% and height=100% with set parameters for the list?
you can try this
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:
<button class="signout_btn" id="btnSignOut">Sign Out</button>
Could you please check with this code?
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be:
Please try below code snippet..
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
JAVASCRIPT:
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});
Hi I have created a navigation bar and I want to place a home image icon at the start of the navigation. However when I try to it either moves the other items down or when I hover over the icon the hover doesn't work properly.
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="icon-home"></li>
<li id="et"> England
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li id="et"> France
<ul>
<li>Ligue 1
</li>
</ul>
</li>
<li id="et"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li id="et"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li id="et"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
In the link below I managed to get the heading in line however the hover effect doesn't work. http://jsfiddle.net/mxohL7kL/
The home link has no text in it, that is why your hover effect is not the same height as the other link. What you could do is, gives the home anchor a text and hide it.
<!-- HTML -->
<li class="icon-home"><span>Home</span></li>
//css
.icon-home a span {
visibility:hidden;
}
see the example here
I have a simple one page site. Im using the "top-bar" wrapped in a "fixed" div, which works fine on every size but mobile. On mobile the nav is in fact fixed until the menu icon is clicked/tapped. then it opens the menu at the top of the page and nav is no longer fixed.
Here is my code:
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
Page Title
</h1>
</li>
<li class="toggle-topbar menu-icon"></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Process</li>
<li class="divider"></li>
<li>Bookshelf</li>
<li class="divider"></li>
<li>Brands</li>
<li class="divider"></li>
<li>Looking for</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Thanks in advance.
Right I have seen the following information on this topic so do understand more about is here is what I have read so far:
Removing/adding link class onclick
Changing an element's ID with jQuery
and I have read the obvious jquery UI page but I can't find the way to add the onclick so that it changes the "parent" element to class="active"
<!--navbar-->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#" >Relution.co.uk</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left hide-for-medium-up">
<li class="has-form">Click Here to login</li>
<li class="has-form">Not a member? Register for free</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="active">Home</li>
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li>Services</li>
<li class="divider"></li>
<li>Portfolio</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
<li class="has-dropdown hide-for-small">
</i>
<ul class="dropdown">
<li><i class="foundicon-search"></i> Search</li>
</ul>
</li>
<li class="has-form hide-for-medium-up">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</form>
</li>
</ul>
</section>
</nav>
<!--/navbar-->
Below is the code that I'm using to target the links for an onlick even when I do this I want the parent li to become acive and all others to not be active
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){
http://jsfiddle.net/n5CLu/
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active').siblings().removeClass('active');
});