We Keep Coding

how to the make animation happen at the same time?

Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk.
So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.
Help is highly appreciated!
let expandIcon = document.querySelector('.epnd-clpse-icon')
expandIcon.addEventListener('click', function() {
$('.sidebar-container').toggleClass('sidebar-container-clpse')
$('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')
console.log("I am clicked")
})
.sidebar-container {
background: #ccc;
}
.epnd-clpse-icon {
background: white;
color: white;
}
a {
text-decoration: none;
}
.sidebar-icon i {
color: #06d6a0;
width: 30px;
}
ul {
padding-left: 0;
}
.sidebar-container {
width: 100%;
max-width: 15%;
min-width: 250px;
transition: all 0.5s linear;
position: relative;
border-left: 20px solid var(--primary-light);
overflow-x: hidden;
}
.sidebar-container-clpse {
min-width: 80px !important;
width: 80px !important;
overflow-x: hidden;
transition: all 0.5s linear;
}
.epnd-clpse-icon {
position: absolute;
/* bottom: 100px;
left: 10px; */
top: 50%;
right: -10px;
transition: all 0.5s linear;
cursor: pointer;
background-color: #001846;
padding: 0.8rem;
border-radius: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
.sidebar .nav-link {
display: flex !important;
padding: 0.6rem 1rem;
align-items: center;
}
.sidebar ul li {
position: relative;
width: 100%;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar-container bg-primary-ex-lgt">
<div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
<ul class="dash-links-icon">
<div class="dash-res-close-icon px-2 mb-5">
<i class="fa-solid fa-chevron-right"></i>
</div>
<li class="links-icon my-2 <?php if($page=='home'){echo 'sdbr-active';}?>">
<a class="nav-link" href="user-dashboard.php">
<span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
<li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
<a class="nav-link" href="quiz.php">
<span class="sidebar-icon">
<i class="fa-solid fa-lightbulb"></i>
</span>
<span class="sidebar-text">Quiz</span>
</a>
</li>
<li class="links-icon my-2">
<a class="nav-link" href="#">
<span class="sidebar-icon">
<i class="fa-solid fa-book"></i>
</span>
<span class="sidebar-text">Blog</span>
</a>
</li>
</ul>
<div class="epnd-clpse-icon">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>

In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;
.epnd-clpse-icon-trn{
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.
How to fix:
To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.
Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
// transition: all 0.5s linear;
// left: 0px;
}
Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.

HTML CSS Javascript Hamburger Menu problem

would someone mind looking at a website please? The address is test.dvps.uk/index.html
I'm having issues with the Hamburger Menu, its in a 50% column and I want it right aligned. I've tried align content, floating and different position and displays but can seem to get it right. The other problem i'm having is that when the menu is toggled, it expands but pushes the content down of the container below but I want it to move the container too.
I'm sure that my tinkering to align the menu has caused this issue, so before I break it any further would you mind helping, please? Thank you :)
$(document).ready(function() {
$(".hamburger").click(function() {
$(".nav").slideToggle("slow");
});
});
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
border: none;
}
html {
box-sizing: border-box;
}
body {
font-family: "Arial";
font-size: 1.2em;
}
.container {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
}
.container-bottom-pad {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
padding-bottom: 80px;
}
.outerContainer {
background-color: #F1F1F1;
}
.row::before,
.row::after {
display: table;
content: " ";
clear: both;
}
.row {
padding: 10px 0;
}
.one,
.one-third,
.two-thirds,
.one-fourth {
width: 100%;
}
#headerAndNav {
background-color: rgba(135, 196, 66, 0.60);
margin-bottom: 10px;
}
header img {
z-index: -2;
position: absolute;
width: 20%;
margin: 0 auto;
}
.header-logo {
position: relative;
height: 100px;
width: auto;
}
.nav {
display: none;
padding: 0;
overflow: hidden;
/* Makes the sliding animation cleaner */
}
.nav-item {
list-style-type: none;
text-align: center;
background: #87c442;
display: block;
margin: 12px 0;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 6px #2c3e50;
}
.nav-link {
text-decoration: none;
color: #333;
}
.nav-item:active {
box-shadow: none;
transform: translate(0px, 6px);
transition: transform .20s;
}
.hamburger span {
display: block;
width: 35px;
height: 4px;
background: #625948;
margin: 5px 0px;
padding: 0;
}
.hamburger:hover span {
transition: background ease-in-out .25s;
background: #87c442;
}
.hamburger:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
<div class="row">
<header>
<div class="eleven-twelths column">
<nav>
<span class="flex-container">
<div class="align">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="successes.html">Successes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prices.html">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</span>
</nav>
</div>
<div class="one-twelth column">
<img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->

Well, if you want a brute force solution, just do this in the CSS file:
.hamburger { position:fixed; top: 25px; right: 30px; }
This will take the hamburger div out from the document flow and it will always stick to the given position.
I see a couple other issues arising on the horizon, but keep going.
And take the whole align div out of the HTML.

After looking the adress you mention (test.dvps.uk/index.html) and following your questions:
1)" ... the Hamburger Menu, its in a 50% column and I want it right aligned ..."
The problems it's related to the div with class flex-container and the next div with class align (and note you have two definitions of class align: one floating right and the other floating left!)
2) ...pushes the content down of the container below but I want it to move the container too...
You can try with clear: right in the container after the menu.
Also you must note some properties in your file custom.css are misspelled (i.e bot instead bottom). Check it out this too.
I hope this help.
Saludos!

1) The alignment, as noted by others, is due to the flex container. Add:
justify-content: flex-end to right align.
2) The toggled menu pushing the content down is due to the DOM being changed (think of it as an element that goes from 0px width/height to 100px width/height). The easiest fix is to take the element out of the DOM flow. One way is using position. So, an example:
position: absolute; right: 0; z-index: 1 to ul.nav
Your hamburger should now be right aligned, and the hamburger content should not interfere/push down the other content.

make dropdown menu still visible even when mouse hover is lost

I need to have main menu with dropdown menu items. So, when user hovers menu item then dropdown menu is shown. This is already done by CSS and :hover selector.
However, usually when :hover is lost (mouse is moved outside menu item element) then appropriate dropodown also disappears. But what I need - menu is still seen and disappears only on click.
One example of this effect is here: http://theemon.com/f/forever/Livepreview/agency-wedding/index.html
However I do not understand which CSS or JS creates this effect, so I cannot add snipper here (if I could, I would not ask).
In this particular example, when you hover menu item "Pages", dropdown menu appears, but it doesn't disappear when :hover is lost. It stays there. I am not able to find, what makes this effect - is it some JS or CSS?
HTML:
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>
Some CSS:
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul, ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation > li:hover .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}

You can add a class like .open on mouseenter to your li element which contains a dropdown.
Then do this:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
jsFiddle
CODE SNIPPET:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}
.navigation > .open .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li class="is-dropdown">
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>

I am sure there are other parameters to this functionality, but here is a base level solution for you.
$(document).ready(function() {
$('.drop-down').slideUp(0); //hides all your drop downs
$('.navigation li:has(> ul.drop-down)').on('mouseenter', function() {
$(this).children('ul').slideDown();
});
$('.closeEm').on('click', function(e) {
e.preventDefault(); // this stops the page jumpping on click
$('ul.drop-down').slideUp();
});
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation li {
background-color: #ddd;
}
.drop-down {
position: absolute;
top: 70px;
width: 160px;
z-index: 999;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
<li>
pages
</li>
<li>
pages
</li>
<li>
pages
<li>
Close Dropdowns
</li>
</ul>

I'm not sure if i understand what you are trying to do, but i guess that this example will be what you need:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Horizontal scroll in CSS when overflow-x

In a web application I have some panel. In that panel I have some labels that I'm going to retrieve by json, so I will not know the exact number. I'd like to add a horizontal scroll when these labels overflow-x in their div. I've done it using white-space: nowrap and overflow: auto, but then the labels appear shifted downwards. They are no longer aligned with the title and the icon in the panel. And I'm not able to align them.
This is the HTML code:
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Client 1</span>
<div class="commesse">
<ul>
<li>Matr 23</li>
<li>Matr 78</li>
<li>Matr 1351</li>
<li>Matr 63</li>
<li>Matr 81</li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Client 2</span>
<div class="commesse">
<ul>
<li>Matr 1235</li>
<li>Matr 61</li>
<li>Matr 72</li>
<li>Matr 42</li>
<li>Matr 771</li>
<li>Matr 671,b</li>
<li>Matr 217.a</li>
<li>Matr 2754</li>
<li>Matr 2</li>
<li>Matr 887</li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Client 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Client 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Client 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Client 6</span>
</a>
</li>
</ul>
</nav>
And this is the CSS concerning the mentioned html:
.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
max-height: 388px;
}
.nav li {
display: block;
float: none;
width: 100%;
height: 164px;
border: 2px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
overflow: auto;
}
.nav li i {
display: inline-block;
padding: 27% 28%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
}
.nav li span {
display: block;
text-align: left;
margin-right: 11px;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
padding: 0.8em;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}
.nav li span,
.nav li span.icon {
display: inline-block;
}
.nav li .icon + span {
font-size: 1.3em;
}
.icon + span {
position: relative;
top: -0.1em;
}
.icon {
padding-top: .8em;
}
.commesse, .commesse ul {
display: inline;
}
.commesse ul {
white-space: nowrap;
}
.commesse ul li {
display: inline;
}
And here is the FULL CODE: enter link description here

Just remove white-space: nowrap; from .commesse ul and give it to .nav a
Updated Plunker

Hidden sidebar that shows up on hover

I'm trying to create a sidebar that is hidden by default but that shows up on hover. The closest example I can think of is this one: http://www.sidlee.com/. When you're on any of the pages beyond the home page, the sidebar only shows numbers. Once you move your mouse over this area, the sidebar expands to show the text. I'm guessing there's a way to do this with JavaScript but I'm no expert so I though somebody here could help me out.

That's just a simple example but hopefully it will put you on the right track :)
CSS:
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
<ul>
<li><span>01</span> HomePage</li>
<li><span>02</span> SubPage 1</li>
<li><span>03</span> SubPage 2</li>
<li><span>04</span> SubPage 3</li>
<li><span>05</span> SubPage 4</li>
</ul>
</div>
If you want to show only numbers at start (without the closing animation onload) change the #nav{width:35px;} and remove the .trigger('mouseleave')
Cheers
G.

Found a way how to actually do this without javascript or jQuery. This answer could be very efficient for those who are working on Uni/College assignments, and cannot use third party libraries such as JQuery.
Obviously having said that, using JQuery will give the same outcome in less code.
Here you go:
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: #fbfbfb;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
<html>
<head>
</head>
<body>
<div class="area"></div>
<nav class="main-menu">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Hope this helps :)

Just start plugging away at the jQuery API. This is how you would begin the structure of it. Using .animate() will give you the ability to adjust your menu css properties how you see fit.
$("#yourmenu").hover( function() {
$(this).stop(true,true);
$(this).show();
}, function () {
$(this).hide();
});

Edvard,
I'd suggest doing this the following way. Hopefully with some ideas and some links to the right jQuery elements you should be able to get this done.
First step would be to have a div that is 100% transparent and a div inside that which contains the menu. Then from the menu div I would hide that element, then when you mouse over the container dive you could use a .hover() method to animate the slide out of the inner div.
Here is some basic code which should get you started.
<div id="menuContainer">
<div id="menu">
<ul>
<li>This</li>
<li>Is</li>
<li>A</li>
<li>Menu</li>
</ul>
</div>
</div>
Then some CSS:
/* Set the container to be fixed to the top of the screen and set it's height
This is important so we know where the mouse can hover */
div#menuContainer {
background: transparent;
position: fixed;
top: 0;
left: 0;
height: 50px;
}
/* Set the menu as hidden */
div#menu {
background: red;
width: 900px;
height:
margin: 0 auto;
display: none;
}
/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }
Then some jQuery:
$('#menuContainer').mouseenter(function(){
$('#menu').slideToggle();
}).mouseleave(function() {
$('#menu').slideToggle();
});
This is obviously untested code, but it should give you a great headstart! :-)

You can use JQuery's .hover() method in conjunction with .animate() to have a div slide out when a .mouseenter() event occurs.
JQuery API for Hover