I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.
Related
I'm trying to switch between menus when clicking on the admin or user menu link. How do I make this an animation to make it slideOutLeft for the current menu and then slideInLeft for the next menu? Is there any possible way by using it and not using add class display none or block?
Here's my code:
A little bit messy for the jQuery functions also is there any chance to improve and make it more robust for each functions?
$(document).ready(function () {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function (e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function (e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
.show-nav {display:block !important;}
.hide-nav {display:none !important;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>
I hope this is what you're looking for. I've added comments to the CSS where all the animation is defined.
$(document).ready(function() {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function(e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function(e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
/*changing the margin-left*/
.show-nav {margin-left: 0;}
.hide-nav {margin-left: -220px;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>
I am using the following script as navbar, however I can't figure out how to make the menus/submenus respect the screen sides, and not continue to open outside of the screen border.. I don't want to change the default behavior (direction) of all the menus, just to change it it it would be cut by any of the sides..
I found a similar post (and another one too), but I don't know how to implement the same answer to this current code.
Example of the menu being cut by the side of the monitor:
Here is the code snippet, along with jsfiddle link too.
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
in your sub-sub menus you're aligning based on left margin at 149px, just use the same attribute but instead for the right. right:149px; instead of left:149px;
ul.sub-menu ul.sub-menu {
/* level 3+ */
right: 149px;
}
Also you can align the sub menus to the left of the nav items. To do this use :
ul.sub-menu {
/* level 2 */
right: 0;
left: initial;
}
I included both examples in this snippet:
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
right:0;
left:initial;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
right: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
I guess the real question here is, where do you want it to go? If there's no page real estate to the right of your menu, you can't place the submenu to the right, you have to place it to the left.
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: -149px;
top: 0px;
}
Note, the left value is changed from 149px to -149px. That places the submenu to the left (where you have screen real estate), and not to the right, where you don't.
I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>
I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.
You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;
I wanted to create a navigation bar like this, " Artist News HH Blog Contact " With HH being the title of the page. I want the navigation alongside the heading. I attempted it but it isn't right and its very untidy.
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists</li>
<li>News</li>
<h1>HH</h1>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
heres my code
There's a few things wrong with your code, mainly the invalid html around the <h1>HH</h1> bit.
I updated your CSS as well to position the HH properly in between the other links. I change your h1 css as well as .main-nav h1.
Also if you remove the width: 10%; from the h1 css it will fix the border on the heading.
h1 {
text-align: center;
font-size: 50px;
padding-bottom: 1px;
margin-top: 0px;
border-bottom: 6px solid black;
}
#heading {
position: fixed;
z-index: 1;
width: 100%;
height: 134px;
text-align: left;
padding: 1em 0;
border-bottom: 2px solid black;
top: 0;
background-color: #f6f6f6;
}
/*================================================================================================================================*/
/* navigation styles*/
.main-nav-scrolled {
width: 100%;
position: fixed;
top: 0;
}
.main-nav a {
text-decoration: none;
color: Black;
text-transform: uppercase;
font-weight: 600;
display: block;
padding: 10px 10px;
opacity: 1;
}
.main-nav h1 {
font-weight: normal;
}
nav {
width: 100%;
margin: 0 auto;
position: relative;
}
nav ul {
display: inline-block;
list-style: none;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
margin-top: -1.7%;
margin-left: -5%;
}
nav ul li {
display: inline-block;
margin-left: 6%;
padding: 3px
}
.main-nav h1 a {
position: relative;
color: #000;
text-decoration: none;
}
/* navigation hover styles*/
/* nav ul */
nav ul a {
position: relative;
color: black;
text-decoration: none;
}
nav ul a:hover {
color: #000;
}
nav ul a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
top: -3px;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX (0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*================================================================================================================================*/
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists
</li>
<li>News
</li>
<li>
<h1>HH</h1>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
Move the <h1> element into a <li> and remove some of the css. Here is what my final looks like, and it works.
h1{
text-align: center;
font-size: 50px;
padding-bottom:1px;
margin-top:0%;
border-bottom: 6px solid black;
}
<ul>
<li>Artists</li>
<li>News</li>
<li><h1>HH</h1></li>
<li>About</li>
<li>Contact</li>
</ul>
I would not use h1 at all. Use
<li id=hs>HH </li>
In css use
#hs
Font-size:16;
Or something that fits your need. Sorry for layout I am writing on phone.
One thing is that you're putting your <h1>HH</h1> in there illegally. You've got your <ul>, so you need to make your header a list element by doing <li><h1>HH</h1></li>.
You can delete your margin-left: 44%; from your h1 in your css now. That should clean it up a bit.