I have use the Yeoman angular-fullstack generator and absolutely love it!
I'm trying to add a dropdown in the navbar.
I found the navbar controller in Client/Components/Navbar/navbar.controller.js and added items to the menu object. This works fine for individual pages, however I cannot find any syntax on how to add a dropdown menu!
I'm sure this is an easy question to answer but I am struggling to find any relevant documentation.
Cheers
Angular fullstack uses bootstrap. So you can use a bootstrap 3 drop-down menu where you would like your menu to be in the file that you found. If you go to http://getbootstrap.com/components/#dropdowns it's explained there.
angularfulstack may use bootstrap 3, however, for dropdown you need to use ui-bootstrap way of doing things.
<li ng-show="$ctrl.isLoggedIn()" class="btn-group" uib-dropdown is-open="status.isopen">
<a>
<span id="single-button" type="button" uib-dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-cog"></span>
</span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="users"><span class="fa fa-address-card-o"></span> Users</a></li>
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="dashboard"><span class="fa fa-dashboard"></span> Dashboard</a></li>
<li ng-show="$ctrl.isAdmin()" class="divider"></li>
<li ng-show="$ctrl.isLoggedIn()" role="menuitem" ui-sref-active="active"><a ui-sref="company"><span class="fa fa-gears"></span> Company Information</a></li>
</ul>
</li>
Related
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Contacts
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Email</li>
<li><a rel="noopener" href="#" target="_blank">LinkedIn</a></li>
<li><a rel="noopener" href="#">Github</a></li>
<li><a rel="noopener" href="#" target="_blank">Stackoverflow</a></li>
</ul>
</li>
I am having an issue with a dropdown box in my header. I have been looking all over on the bootstrap website and w3schools and I have found stuff but it seems like nothing has worked so I wanted to see if anyone else had this problem and if there was a solution.
What is happening is when I select the dropdown it does not want to toggle. I even made sure to have the toggle class. When I type in it will stay stuck open, so something is wrong with the toggle but I have not been able to find the solution.
one of bootstrap 5 changes is using data-bs-... instead of data-... attributes, so try data-bs-toggle="dropdown" attribute
It is going to look stupid but, please if you have this problem, make sure to include the bootstrap script at the bottom of the body. It will make your life much easier lol.
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
can somebody of you have a look at this example:
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
I want to keep the toggle function, but the brand should be another link (homepage).
I tried like this:
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand">
Menu<a id="menu-toggle" href="#">
<span id="main_icon" class="glyphicon glyphicon-align-justify"></span>
</a>
</li>
</ul>
But this will cause that there is a clickable brand, but the toggle button is not right from the brand. Instead it is in a new "navigation point".
Can somebody help me how I need to modify the given code to make this possible?
Thanks for any help! :)
This is your solution :
<li class="sidebar-brand">
<a style="width:50%;" href="index.php">Home</a>
<a id="menu-toggle" style="width:50%;height:95%" href="#"><span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a>
</li>
You can also change "Home" to whatever you want.
also i should notice you have to put the styles in your style folder , but i added it inside tag for ease of describing.
I am creating bootstrap dropdown menu in my page ..I need to create same dropdown for different elements...I created one dropdown as follows
<ul>
<li class="dropdown" id="menu5"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu5"> Settings
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Content</li>
<li><a>Add
User</a></li>
<li><a href="" id="vwUserHier">
search</a></li>
<li>Edit</li>
</ul></li>
</ul>
one menu created correctly but i want to create other menu with the same options how should i do this ...
Is there any way to reuse the contents of dropdown-menu class...
Have you tried JQuery clone method??
You'll probably have to use it with the 'true' option.
I've got a project I'm working on and for some reason, I can't get the dropdowns to work on my menu. I've included the proper files which leads me to believe it's a problem in my code.
Here's my page in action: https://git.jobud9.com/ (try the dropdown on the right side of the menu. Also don't mind the prompt your browser will issue because my certificate approval's still pending.)
And here's the code powering it:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>hi</li>
</ul>
</li>
Thanks much in advance!
Your html code is correct. Maybe you forgot to attach a script? Look this dropdown js