Creating a slick CSS dropdown menu with a slidedown effect

I recently designed a CSS menu with dropdown functionality, where the sub menu remains hidden until you hover over the menu item. I am curious to know if it is possible to implement a CSS transition to make the sub menu slide down instead. You can view a mock-up of the menu here.

#main-nav {
  position: relative;
}

#main-nav>ul>li {
  width: 12.5%;
  float: left;
  text-align: center;
  line-height: .9em;
  font-weight: bold;
  background: #ccc;
}

#main-nav>ul>li>a {
  display: block;
  color: #333;
  line-height: 12px;
  font-size: 14px;
  padding: 22px 0;
  text-decoration: none;
}

.nav-dropdown {
  margin: -5px auto;
  position: absolute;
  left: -999em;
  /* Hides the drop down */
  text-align: left;
  padding: 0;
  border-top: 0;
  width: 500px;
  background: #333;
  color: #f2f2f2;
  border-bottom: 10px solid #25272a;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

#main-nav li:hover .nav-dropdown {
  left: 0;
  top: auto;
  z-index: 11;
}
<div id="main-nav">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
      <!-- Start Blog Drop Down-->
      <div class="nav-dropdown">
        <p>have this item slide down from CSS</p>
      </div>
      <!-- /.nav-dropdown -->
    </li>
  </ul>
</div>

htmlcss

Answer №1

Achieving the desired effect is possible by utilizing the max-height property, which can be implemented according to the guidance provided here. Alternatively, opting for a fixed height like the method outlined in the preceding response is also an option.

Styling with CSS

.nav-dropdown {
    margin: 0 auto;  
    height: 0;
    overflow: hidden;
    text-align: left;  
    padding: 0;  
    border-top: 0;
    width: 500px;
    background: #333;
    color: #f2f2f2;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: 0;
    max-height: 0px;
}

#main-nav li:hover .nav-dropdown {
    height: auto;
    z-index: 11; 
    max-height: 200px;
    transition-property: all;
    transition-duration: 1s;
    border-bottom: 10px solid #25272a;
}

http://jsfiddle.net/L8WVP/7/

You might find this resource helpful as well.

Answer №2

If you're looking to create a sliding effect for a div tag, start by setting the initial height to 0 and adding a CSS transition.

-webkit-transition: height 0.5s ease-in;
-moz-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
-ms-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;

Next, adjust the height of the div on hover using the following code:

#main-nav li:hover .nav-dropdown {
    left: 0;
    top: auto;
    z-index: 11; 
    height:200px;
}

Once you've added these styles, you should have a sliding effect in place. If you need further assistance, feel free to check out this link for more help: http://jsfiddle.net/L8WVP/6/

Answer №3

<ul class="navigation-menu">
    <li><a href="#">Home</a></li>
    <li class="menu">
    <a href="#">Our Services</a>
    <ul class="submenu-links">
      <li><a href="#">Service 1</a></li>
      <li><a href="#">Service 2</a></li>
      <li><a href="#">Service 3</a></li>
      <li><a href="#">Service 4</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

    ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li a {
  text-decoration: none;
  color: #e74c3c;
  font-family: Tahoma, Arial;
}
.navigation-menu {
  background-color: a#e74c3c;
  width: 75%;
  margin: 20px auto;
  min-height: 50px;
}
.navigation-menu > li {
  float: left;
  padding: 0 20px;
}
.navigation-menu > li > a {
  line-height: 50px;
  color: #FFF;
}
.navigation-menu .menu {
  position: relative
}
.navigation-menu .menu .submenu-links {
  position: absolute;
  width: 200px;
  -webkit-box-shadow: 0px 1px 1px #CCC;
  box-shadow: 0px 1px 1px #CCC;
  display: none;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.navigation-menu .menu:hover .submenu-links {
  display: block
}
.navigation-menu .menu .submenu-links:before {
  content: "";
  position: absolute;
  display: block;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: #FFF transparent;
  top: -6px;
  left: 5px
}
.navigation-menu .menu .submenu-links li {
  padding: 5px 10px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.navigation-menu .menu .submenu-links li:hover {
  background-color: #e74c3c;
}
.navigation-menu .menu .submenu-links li:hover a {
  color: #FFF;
  padding: 0 11px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with C# CSS Asp navigation bar

I have created a menu with a submenu that is causing layout issues on my site. Here is the code snippet for the menu in the site master: <div id="menu"> <h2> Dashboard</h2> <asp:Menu ID="NavigationMenu" dir="rtl" runat ...

asp.netcss

CSS Styling Dropdown Menu for Internet Explorer 5 and Internet Explorer 11

I am encountering an issue with a select box that is coded as follows: <html:select property="list_data" size="12" style="width: 350px;" ondblclick="JavaScript:doOK()"> <html:optionsCollection property="list_data" label="codeAndNameLabel" val ...

htmlcssinternet-explorer-11

Measuring Bootstrap's breakpoints using specific divs: A beginner's guide

Is it possible for Bootstrap 5 to create responsive layouts with draggable vertical borders between two columns? The answer is Yes, by adjusting Bootstrap to use container queries instead of media queries. Major browsers have supported container queries si ...

csscss-gridbootstrap-5container-queries

Animate the expansion and shrinkage of a div instantly using jQuery

I am trying to create an animation effect using jQuery animate on a div element where it starts large and then becomes smaller. Here is the code I have written: $(this).animate({ opacity: 0, top: "-=100", width: "38px", height: "32px" }, 1 ...

javascriptjquerycss

Tips for aligning an image within a div, using a specific aspect ratio, while maintaining the original height and width

Apologies for the confusing title, but I'm struggling to find the right words to explain my issue. How can I properly fit my image labeled as "carouselMap" within the div named "carouselItem" while maintaining an aspect ratio of 2 ...

htmlcss

Eliminate the character """ from the HTML code

Is there a way to remove the "|" between each "a" tag below using CSS, Javascript, or jQuery since I don't have access to edit the HTML directly? <span class="reportnavigation"> <span class="reportnavigationheader"> Go To Week ...

javascriptjqueryhtmlcss

What steps can I take to stop full-width images from stretching to fit the entire body size when placed within a flex container?

I'm having trouble with my layout - specifically, I have one container with four columns. It looks fine when I manually set the image sizes in each column, but I want to use percentage widths for more flexibility. However, when I do this, the images e ...

htmlcssflexbox

Sidebar misalignment

Apologies in advance for what may seem like a trivial question, but I have been grappling with this all day and can't seem to find the solution. I've tried adding and removing divs without success. To make things easier, I've created two liv ...

htmlcss

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

javascriptjqueryhtmlcss

Importing Data from Wordpress JSON Feed to Create a Table

Struggling with organizing my data into a table, as each row is currently generating a new table. Utilizing the JSON Content Importer with the following code: ...

phphtmljsonwordpress

Spinning a CSS object around an axis

Trying to add a unique touch to my image rotation with CSS. While familiar with rotating around x, y, and z axis, I want to achieve a diagonal rotation this time. Wondering if there's a way to tweak the y axis for a more slanted effect on my image? ...

javascripthtmlcss

How come the html element doesn't have a default height of 100%?

Is there a reason why the html element is not automatically set at 100% height by default? Can you think of any scenarios where having it take up less than the full height of the window would be beneficial? html { height: 100%; } [Update] I modified th ...

htmlcsslayoutheight

Can HTML blocks be coded to have a triangular shape and content inside?

An old colleague who used to work with me recently sent over a website design concept. Here's a section of the page showcasing a list of posts - Upon closer inspection, I noticed that most of the pink polygons are just background elements while some ...

htmlcssmarkup

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

Homepage experiencing issues with Jquery slider functionality

I have been attempting to incorporate a slider on my magentogo store, but unfortunately, after following all the code from the demo example of the slider along with the necessary CSS, the slider refuses to work. The CSS is configured to display none, as th ...

jqueryhtmlcssmagento-go

over line up text align on the baseline with hr

I'm looking to make sure the text is positioned just above the hr tag, similar to how the logout button appears with bootstrap. This is the desired outcome: https://i.sstatic.net/gIl1b.png Here's the code I have using bootstrap : <di ...

cssbootstrap-5

Trouble with Flex 3 styles not fully applying to dynamically generated tabs within a TabNavigator

When using ActionScript to dynamically create a tab, I noticed that the style is applied to the skins but not to the text of the newly created tab until I click on another tab and then go back to it. ActionScript private function clickAddTabHandler(event ...

cssapache-flexactionscript-3

"PHP Dilemma: Navigating the Ajax Button Press Situation

I've been attempting to create a button that triggers a PHP script on a webpage and updates only a specific div tag, but so far I haven't had any success. Removing the $ajax section of the script allows my buttons to change states, but as soon as ...

javascriptphpjqueryhtmlajax

Twitter Share Button not appearing within Bootstrap Accordion

Looking to incorporate a Twitter 'share' button within each accordion item in Bootstrap 4 when expanded. Currently, I can get the button to show up outside of the accordion but not inside. I suspect that the issue lies with the class=="collapse ...

htmlcsstwitter-bootstrapbootstrap-4share-button

What is the best way to access a webpage that has been received through an ajax request

My ajaxcall is giving me back an html page in the response. I'm trying to figure out how to open this in a new window. Any ideas on how to make it happen? https://i.sstatic.net/xguL5.png The console.log(data) command seems to output all the html con ...

javascripthtmlajaxiframeembed