asked on

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

lenamtl

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

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

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

adra750

ASKER

why it still doesn't work?

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adra750

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

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

adra750

ASKER

Ok it worked

lenamtl

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

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)

lenamtl

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

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

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.