adra750

asked on 4/30/2015

html/css dropdown menu issue

hello,

I'm trying to implement a dropdown menu when you click on a glyphicon, here is the code:

<li><div class="btn-group">
  <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
       <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></li>

Open in new window

li {
display: inline;
}

Open in new window

it works fine in http://jsfiddle.net/ but not in my web page, I don't know why

HTMLCSSBootstrap

Last Comment

lenamtl

8/22/2022 - Mon

lenamtl

4/30/2015

Hi,

The script work ok without the display:inline, so remove this otherwise you won't see the divider and may have other issue.

You have an extra <li class="divider"></li> that can be removed.

adra750

4/30/2015

ASKER

your solution came with 2 problems,

The first is that I want the menu to be in 1 line, I have more icons,

Second, even when I removed the display:inline in css, the problem is not resolved and i cannot see the dropdown menu

lenamtl

4/30/2015

Don't place the DIV inside LI, so remove the first and last LI.

to keep only this part

<div class="btn-group">
  <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Open in new window

Here is an example with btn-group
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=dropdowns-within-button-groups

Here is dropdown demos, just replace wording with your icons:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

Your help has saved me hundreds of hours of internet surfing.

fblack61

adra750

4/30/2015

ASKER

why it still doesn't work?

ASKER CERTIFIED SOLUTION

lenamtl

4/30/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

adra750

4/30/2015

ASKER

I have this in header:

<html>
	<header>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="styles.css">

Open in new window

and js script down before the </body> tag

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

So here is the full code:

<html>
	<header>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="styles.css">




	</header>
<body>
	
<div class="btn-group">
  <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Open in new window

adra750

4/30/2015

ASKER

I added Google jQuery link too

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

didn't help, why would this happen? weird

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

adra750

4/30/2015

ASKER

Ok it worked

lenamtl

4/30/2015

Hi, you need jQuery for javascript plugins

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </script>

Open in new window

You may want to try to load the script locally instead of using the online link
replace
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
by
<script src="js/bootstrap.min.js"></script>
and add the file in you js folder

Are you running it inside a webserver? if not you should install one like this one:
http://www.wampserver.com/en/

Try using the basic template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

Open in new window

adra750

4/30/2015

ASKER

Ok, 1 question, why do you have scripts inside header and scripts inside body? I mean why don't you place them in one place?

I'm using local server, I'm running vagrant (homestead)

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

lenamtl

4/30/2015

This is the basic template model from Bootstrap.
<!--[if lt IE 9]> js is always in the head I'm not sure why exactly.

All javascript link can be placed before the closing </body>
to load the page the page faster.

adra750

4/30/2015

ASKER

how can I add the triangle when i click on the button

check the screenshot
Screen-Shot-2015-04-30-at-8.08.26-PM.jpg

lenamtl

5/1/2015

This is the related part of the CSS

.dropdown ul.dropdown-menu:before {
  content: "";
  border-bottom: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  top: -10px;
  right: 16px;
  z-index: 10;
}

Open in new window

To get the full HTML & CSS (click on the appropriate button to get the code)
http://bootsnipp.com/snippets/featured/dropdown-menu-ui

Good luck with your project.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.