1

I'm using Bootstrap 3.3.4 for my website.

I've a menu code snippet as follows :

<ul class="nav navbar-nav">
<li class="{{projects}}"><a href="/darpan/pages/project/projectList.html">Projects</a></li>
</ul>

The above code is working fine. When user clicks on menu 'Projects' the respective web page opens.

Now I want to add a sub-menu to the above menu. This sub-menu should open a new web-page linked to it. The code I tried for it is as follows:

<ul class="nav navbar-nav">
  <li class="{{projects}}" class="dropdown">
    <a class="dropdown-toggle projects"
        data-toggle="dropdown"
        href="/darpan/pages/project/projectList.html">
      <span id="projects">Projects</span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="/darpan/pages/project/createNewProject.html">Add new project</a>
      </li>
    </ul>
  </li>
</ul>

Now after doing this the issue I'm facing is when user clicks on menu 'Projects' the drop-down menu 'Add new project' opens up and upon clicking on 'Add new project' the respective web-page opens. This is perfect as per my requirement but what about the web-page associated with menu 'Projects' as it's not opening upon clicking on it. This should also work along with the drop-don menu functionality.

Can somebody please help me in this regard? Thanks.

detaylor
  • 7,112
  • 1
  • 27
  • 46
PHPLover
  • 1
  • 51
  • 158
  • 311
  • Please add a fiddle. To make a fiddle go to jsfiddle.net and insert your code in the respective frames. I don't see, that it's possible what you try to accomplish. How do you expect it to work for the user? He clicks the link "*Projects*" and then? Should the dropdown open? Or should he be forwarded to the link location? Both doesn't make any sense, because as soon he is forwarded to the new URL the opened dropdown is gone. You could add a `+` or a `>` before the Link to show the user, that it's a dropdown (like directories/subdirectories in file managers) and make that trigger the dropdown). – Seika85 May 03 '16 at 07:16

1 Answers1

1

Add disabled class in your anchor and add one more <a> with this css

<ul class="nav navbar-nav">
  <li class="{{projects}}" class="dropdown">
    <a class="dropdown-toggle projects disabled" href="/darpan/pages/project/projectList.html">Projects</a>
    <a class="dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="/darpan/pages/project/createNewProject.html">Add new project</a></li>
    </ul>
  </li>
</ul>

css

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

Found the second solution here : https://stackoverflow.com/a/24581001/4119808

Community
  • 1
  • 1
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
  • After adding 'disabled' the menu 'Projects' started working but the drop-down menu 'Add new project' is not opening. I want to work the sub-menu as well. What should I do for it? – PHPLover May 03 '16 at 07:01
  • is it possible to share your problem in fiddle? – Gaurav Aggarwal May 03 '16 at 07:07
  • I don't know how to make it a fiddle. I want to make main menu and sub menu work for different web-pages. – PHPLover May 03 '16 at 07:08