CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menu
Denys Medynskyi
Denys Medynskyi

Reputation: 2353

How to change Bootstrap dropdown's form?

I need to change form of dropdown.

What I have: http://jsfiddle.net/gnEAe/5/

Here is illustration what I want to make: https://i.sstatic.net/dUKB9.jpg

I changed borders with this css:

 .nav
 .dropdown-menu {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

Upvotes: 3

Views: 4916

Answers (2)

jackwanders
jackwanders

Reputation: 16020

Here's a setup that seems to give you the style you're after:

.nav-tabs a { 
    color: #000; 
}
.nav-tabs a:hover {
    color: #444;
}
.nav-tabs {
    border-bottom: none;
}
.nav-tabs .dropdown-menu {
    margin: -1px 0 0;
    z-index: 999;
    -webkit-border-top-right-radius: 4px;
       -moz-border-radius-topright: 4px;
            border-top-right-radius: 4px;
}
.nav-tabs > li > a {
    position: relative;
    z-index: 1000;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
    background: transparent;
}
.nav-tabs > li.dropdown.open > a {
    border-color: #000 #000 #fff;
    background: #fff;
}
.dropdown-menu {
    border-color: #000;
}
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret {
    border-top-color: #000;
    border-bottom-color: #000;
}

http://jsfiddle.net/JR9sd/

The key to getting the outline of the menu right is to adjust the z-index of the tab and the dropdown menu so that the tab sits on top of its dropdown. By making the border-bottom-color of the active tab white, you effectively hide the top border of the dropdown.

Upvotes: 2

Lodder
Lodder

Reputation: 19733

Have had a little mess around with JSFiddle and have come up with this. Due to lack of sleep it's not amazing but it's a start. Hope this helps you in some way.

CSS:

.container {
  border-bottom: 1px solid #FFF;
}
ul.nav li.dropdown:hover ul.dropdown-menu {  
  display:block;    
  margin: 0px 0px 0px 10px;
  border-bottom: 1px solid #000;  
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: none;
  border-top-left-radius:0px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
  border:none;   
}
.navbar .nav > li > a {
  margin: 0px 10px;
  border-top: 1px solid #FFF;  
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #000;
  text-shadow:none;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active{
  border-top: 1px solid #000;  
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top-right-radius: 5px;  
  border-top-left-radius: 5px;
  color: #000;
  text-shadow:none;
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

HTML:

<div class="navbar ">
     <div class="container">
        <ul class="nav pull-left">

          <li><a href="index.html"><b>Home</b></a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-togle" data-toggle="dropdown">
            <b>Download</b>
            <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
            <li><a href="#">Link2</a></li>
            </ul>
            </li>
          <li><a href="faq.html"><b>F.A.Q.</b></a></li>
          <li><a href="#" onclick="openWin()"><b>Support</b></a>
          </li>     
        </ul>
    </div>

Here is also a JSFiddle version for a live preview.

http://jsfiddle.net/KckU3/1/

Regards

Upvotes: 3

Related Questions