I would appreciate some help with an issue I've come across whilst coding my blogger blog - http://www.blankesque.com.
I would like the tabs / 'page' links to appear on the right hand side of the screen. I have managed to do this with the three dropdown menu tabs / 'pages' links however the tab link which doesn't have a dropdown menu - titled 'contact' - doesn't appear alongside the other elements on the right hand side of the screen.
I have tried to add the following piece of coding to resolve this issue:
#wctopdropnav li{
float : right;
}
However another issue comes to light if I use the above stated coding. Although the tab does indeed appear on the right side of the screen, but the text/links for the other three tabs' dropdown menu options then also appear on the right side, but I would ideally want them to stay on the left side. Below I have included the entire navigation bar coding.
<style>
#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;
z-index:100;
top:0px;
left:0px;
position:fixed;
background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
}
#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
</ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
<li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
</ul>
</li></ul>
<li><a href='#'>Contact</a></li>
</div>
</div>
I have tried various different methods but to no avail, if anyone can aid me in solving this issue then I'd be extremely grateful.
Thank you in advance,
Iram
You should start by putting the li for contact inside of your ul like this:
<div id="wctopdropnav">
<ul>
<li>Blankesque
<ul>
<li>Home</li>
<li>About</li>
<li>Policies</li>
</ul></li>
<li>Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
</ul></li>
<li>Features
<ul>
<li>Beauty</li>
<li>Creative</li>
<li>Fashion</li>
<li>Favourites</li>
<li>Fragrance</li>
<li>Hair</li>
<li>Haul</li>
<li>Life</li>
<li>Skincare</li>
</ul>
</li>
<li>Contact</li><!-- RIGHT HERE -->
</ul>
</div>
See example: https://jsfiddle.net/pyexm7us/
Related
For my main navigation I have a nested ul that is only displaying the first 6 li when Products is clicked. How do I get them all to display when the user clicks Products? Is it a CSS thing or a script problem? Here's a screenshot.
HTML:
<nav>
<a class="burger_nav"></a>
<span id="logo_link">
<img src="images/nav_logo.gif" alt="Company logo. Links to home page." width="100%">
</span>
<ul>
<span id="phonly"><li>Home</li></span>
<li><a class="sub_drop">Products</a>
<ul>
<li>Resilient Floor</li>
<li>Wood Floor</li>
<li>Food Service</li>
<li>Dilution Control</li>
<li>Carpet Care</li>
<li>General Cleaners</li>
<li>Disinfectants</li>
<li>Industrial</li>
<li>Restroom Care</li>
<li>Hand Care</li>
<li>Laundry Care</li>
<li>Green Products</li>
<li>International</li>
</ul><!-- dropdown -->
</li>
<li>SDS</li>
<li>Libraries</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
Script:
//// phone nav burger
$(document).ready(function(){
$(".burger_nav").on("click", function(){
$("nav ul").toggleClass("open");
});
});
//// phone nav products
$(document).ready(function(){
$(".sub_drop").on("click", function(){
$("nav ul ul").toggleClass("open");
});
});
CSS:
/*********** NAVIGATION (full screen)************/
#phonly{
display:none;
}
#logo_link{
float:left;
padding-top:9px;
padding-top:0.47vw;
width:128px;
width:6.72vw;
margin-left:3.9531%;
margin-right:3.9531%;
}
nav{
float:left;
border-bottom:1px solid #BBB;
z-index:4;
}
nav ul{
list-style-type:none;
text-align:left;
}
nav ul li{
float:left;
position:relative;
width:11.6399%;
font-size:21px;
font-size:1vw;
}
nav ul li:hover ul{
left:0px;
opacity:1;
}
nav ul li a{
display:block;
width:175px;
padding:11px;
padding:0.58vw;
color:#000;
background-color:#fff;
text-decoration:none;
}
nav ul li a:hover{
background-color:#003768;
color:#fff;
}
nav ul li a:active{
color:#F00;
}
nav ul ul{
background-color:#999;
opacity:0;
position:absolute;
left:-9999px;
z-index:20;
}
nav ul ul li{
float:none;
color:#000;
}
nav ul ul li a:active{
background-color:#000;
color:#F00;
}
nav ul ul li a:visited{
color:#003768;
}
nav ul ul li a:hover{
background-color:#003768;
color:#fff;
}
/************* MOBILE *********/
#media screen and (max-width:450px){
#logo_link{
display:none;
}
#phonly{
display:block;
}
.burger_nav{
display:block;
height:40px;
width:100%;
background:url(../images/burger.png) no-repeat 3% center;
background-color:#404040;
cursor:pointer;
}
nav{
background-color:#fff;
width:100%;
}
nav ul{
list-style-type:none;
text-align:left;
overflow:hidden;
height:0;
}
nav ul.open{
height:auto;
}
nav ul li{
float:none;
width:100%;
font-size:21px;
}
nav ul li:hover ul{
left:0px;
opacity:1;
}
nav ul li a{
display:block;
width:100%;
padding:11px;
color:#000;
background-color:#fff;
text-decoration:none;
border-bottom: 1px solid #444;
}
nav ul ul.open{
height:auto
}
nav ul ul{
list-style-type:none;
text-align:left;
overflow:hidden;
height:0;
}
nav ul ul li{
float:none;
color:#000;
}
.sub_drop{
cursor:pointer;
}
nav ul ul li a{
white-space:nowrap;
width:100vw;
background-color:#fff;
color:#000;
font-size:16px;
}
nav ul ul li a:visited{
color:#003768;
}
nav ul ul li a:hover{
background-color:#003768;
color:#fff;
}
}
Any help would be appreciated. Did I write something wrong in the style sheet? Is the script incorrect? It's not my HTML is it? Thank you for your time.
Ok, I've tried your code here: http://jsbin.com/zabimicati/edit?css,output
The issue in overflow:hidden; for nav ul in #media screen and (max-width: 450px).
The easiest way to fix - remove it. But the question is how you expect it to work.
E.g. you may add after overflow: hidden; additionally overflow-y: visible;
I'm new to Jquery and fairly new to HTML/CSS, but because I'm the type that learns through hands-on experience, I've been building a practice website while I learn new things, and have been experimenting with elements I'd like to eventually implement on a genuine site.
I've been trying to build a proper slide menu that activates when the cursor is hovered over the menu items. I've managed to get the menus to slide out, but if I move my cursor down into the slid-out menu, the whole thing starts bouncing! I've tried utilizing .stop() but then it flashes!
I've found questions on here and other sites from people with very similar (if not identical) issues, but I think I'm not understanding any of the answers that worked for them. I need visuals, and answers like "insert an if () {} statement" confuses me because I'm not sure where to put it. If I go by what my source material instructs me to do (put a check/if statement in the bottom function) it just seems to break the code and then the menus don't even slide out.
It has been very frustrating, and when I get too frustrated (like after six hours) I can't think as well about a solution, so if someone could help me find errors in my code or give me a fairly detailed explanation of what I could do to fix this bouncing problem, and how it started, I would really appreciate it.
I've attached the JQ, HTML, & CSS. Thanks in advance.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>
You have a space between your <li> elements and the dropdown menu (You can see it here).
Just remove / move it.
I did
nav {
[...]
// padding: 10px 0;
padding: 0;
}
nav li {
[...]
// padding: 0 10px;
padding: 10px;
}
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding: 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>
Change css in nav li ul where top:50px to padding-top:23px
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
padding-top:23px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0`;
display:block;
}
ul.sub-menu {
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>
So I finally got my dropdown to work however unless i change the nav height here it won't show up:
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
I've been playing with the Z value, but I'm not 100% sure how it works or if i missed something. If i change the nav height to like 150px it works fine, but then there is a huge gap when the dropdown isn't there.
HTML CODE:
<header>
<div class="main">
<div class="wrapper">
<h1>KB Customs</h1>
<div class="fright">
<div class="indent"> <span class="address">Walker, MI 49544</span> <span class="phone">Tel: 616-901-1174</span> </div>
</div>
</div>
<nav>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="about.html">About Us</a></li>
<li>Products
<ul class="dropdown">
<li>
Products
</li>
</ul>
</li>
<li>Gallery</li>
<li>FAQ & Prices</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
CSS CODE:
/***** menu *****/
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
#page1 header nav {
margin-bottom:28px;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
z-index: 2;
}
.menu > li:first-child {
background:none;
}
.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}
.menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}
.menu li a.active, .menu > li > a:hover {
color:#fff;
}
.menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
}
ul li ul.dropdown{
min-width:inherit; /* Set width of the dropdown */
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
display: none;
position: absolute;
z-index: 3;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
color:#fff;
z-index: 3;
}
ul li ul.dropdown li{
display: block;
z-index: 3;
}
ul li ul.dropdown:hover li a{
color:#fff;
z-index: 3;
}
I'm trying to use the Tendina jQuery Plugin. It works great, but I'd like the menus to be laid out horizontally, like this:
I've been messing around with the CSS ( inline-block and other stuff ) but haven't been able to make it work.
I'm not gonna post the JS because it's a whole lot of code... I think too much to paste here, but feel free to check the JSFiddle.
Any help would be highly appreciated.
Thanks.
HTML
<ul class="dropdown">
<li>
Menu 1
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Submenu 2</li>
<li>Submenu 2</li>
<li>Submenu w/ children
<ul>
<li>Subsubmenu 2</li>
<li>Subsubmenu 2</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Submenu 3</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
CSS
.dropdown {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
font-size: 12px;
}
.dropdown li {
padding: 0 10px;
}
.dropdown li.selected {
background-color: #f2f2f2;
}
.dropdown li a {
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
}
.dropdown li > ul li {
padding: 0 20px;
}
.dropdown li > ul li a {
color: gray;
}
.dropdown li > ul li > ul li {
padding: 10px 30px;
}
Here's an updated version of your fiddle
.dropdown
{
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:#f7f7f7;
font-family:Arial,Helvetica,sans-serif;
padding-top:20px;
font-size:12px
}
.dropdown li
{
padding:0 10px;
display:inline-block;
width:auto
}
.dropdown li.selected
{
background-color:#f2f2f2
}
.dropdown li a
{
display:block;
width:100%;
padding:10px;
text-decoration:none;
text-transform:uppercase;
color:#000
}
.dropdown ul
{
position:absolute
}
.dropdown li > ul li
{
padding:10px 0;
}
.dropdown li > ul li a
{
color:gray
}
.dropdown li > ul li > ul li
{
padding:10px 30px
}
}
I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>
I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}
Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo