CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menu
theozuz s
theozuz s

Reputation: 1

drop-down-menu like used in bootstrap

I like to know how bootstrap3 drop-down-menu system in its tutorial page works.
1. It folds all to main topic by default (you can click or scroll-up/down to expand)
2. It expands automatically when you scroll up and down or click particular menu.
3. It matches you with the topic and has some hi-light in the sub-menu
http://getbootstrap.com/css

Can this matching only complete with only css and html, or it has to deal with JavaScript also? If it can be both way what is the suit case for it uses.

Upvotes: 0

Views: 414

Answers (1)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

This is PURE CSS solution of bootstrap dropdown menu, here is working fiddle

http://jsfiddle.net/DTcHh/1837/

HTML

<nav>
    <ul>
        <li>
            Has Dropdown
            <ul>

                <li>
                    Change password </li>

                <li>
                    Edit personal data
                </li>

            </ul>
        </li>
        <li>
            Support

        </li>
        <li>

            Logout
        </li>
    </ul>
</nav>

CSS

nav > ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  color: #555;
}

nav > ul li {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 10px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

nav > ul li:hover {
background-color: #e7e7e7;
    color: #555;
}

nav > ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  min-width: 225px;
  display: none;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  font-size: 14px;
  list-style: outside none none;
  padding: 5px 0;
  text-align: left;
  z-index: 10000;
}

nav > ul li ul li { 
  background-color: transparent; 
  display: block; 
  color: #262626;
  width:90%;
  text-align:left;
  padding-left:10px;
  padding-right:10px;
  text-transform:uppercase;
}

nav > ul li ul li:hover { 
  background-color: #f5f5f5; 
  color: #262626;
  text-decoration:none;
}

nav > ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

ul li ul a li i{
padding-right:5px;
}

nav ul li ul a li{
    color:grey !important;
}

nav ul li ul a{
    color:grey;
    font-size:12px;
}

Upvotes: 1

Related Questions