I am trying to use an image (thumbnail image in nav bar) as a bootstrap drop down. I tried the solution in [bootstrap image drop down][1]
[1]: In bootstrap, How do I make an image a dropdown? but it did not work. This seems fairly simple but I cannot get it working. Basically this is the user's thumbnail image when logged in and I want a drop down for user settings, logout, etc.
I tried it once again and checked out meetup dot com. I got the dropdown while clicking the image without the background but i could not find a way to add the caret.
<div class="container">
<div class="dropdown">
<img class="btn dropdown-toggle" src="images/thumbnail_image.png" alt="dropdown image" data-toggle="dropdown" class="img-responsive">
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</div>
Hope this helps :)
The solution is quite simple. All you have to do is use an 'img' tag between the button tags.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<img src="images/example_image.png" alt="dropdown image" class="img-responsive">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</div>
If you still have problems, please attach your code along with you question. Hope this helps.
I have it the way I want by doing the following but there is no hand pointer on mouse over, I have to add the pointer style and I get a white background behind my image when I click for the drop down. Now I need to correctly style the drop down toggle to fix this. Thanks for your reply.
<li class="side-padded margin_left">
<div class="dropdown top_margin15">
<a class="dropdown-toggle" data-toggle="dropdown">
<?php
echo '<img id="profile-img" class="img-circle img-responsive" src="'.base_url().'i/mbr/img/'.$this->auth_user_id.'.jpeg">';
?>
</a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</li>
Related
When I open up the dropdown menu, only the Home tab is clickable. The rest act like regular text...
<nav class="navbar">
<ul class="nav navbar-nav ">
<li class="aktivan">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cakes</li>
<li>Muffins</li>
<li>Coffee</li>
</ul>
</li>
<li>About us</li>
<li>Orders</li>
</ul>
</nav>
Removing the href="#" from the dropdown-toggle should fix it
To keep URLs intact with link buttons, use the data-target attribute instead of href="#"
dropdowns via data attributes
I believe the href attribute is assigning the target # for the dropdown causing it not to work.
I'm relatively new to web development, and I'm using Materialize for the project I'm working on right now. My navbar code is attached, for some reason I can click on and follow the links in the sidebar, but not in the nav-content tabs. When I take out the tabs tabs-transparent classes in the ul, it works, but it looks ugly. I am loading JQuery- that was the only resolution I saw to this problem when I googled.
<nav class="blue-grey lighten-1 nav-extended" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center"><img src="/application/static/application/colorondarknotext.png" height=60px/></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Account Info</li>
<li>Log Out</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div class="divider"></div>
</li>
<li>Application</li>
<li>Decisions</li>
<li>Travel Information</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="nav-content hide-on-med-and-down">
<ul class="tabs tabs-transparent">
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
</ul>
</div>
</nav>
I've run into a series of issues like this.
Generally you need to look deeper in the docs. In this case the navbar component docs don't address the issue in their example code. You need to look under javascript>tabs section of the docs to uncover more details about how the tabs work.
http://materializecss.com/tabs.html#external
By default, Materialize tabs will ignore their default anchor behaviour. To force a tab to behave as a regular hyperlink, just specify the target property of that link!
The normal anchor (<a>) functionality is disabled/ignored. In order to make your links work like "normal" you need to add a target attribute to your links.
Assuming you want to open the links in the same window, you would add target="_self" to each <a> tag.
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
I'm creating a side nav bar that's on the left side of my page. Within that nav bar, I have a couple dropdown menus that I would like to open to the right instead of below. I've read of using data-toggle="popover", but is there a way using dropdowns instead?
thanks
Though your question is not clear as there is no code but according your description add the below list inside your dropdownlist below one is in bootstrap
<ul class="nav nav-stacked">
<li>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<i class="icon icon-caret-right"></i>
</a>
<ul class="dropdown-menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</li>
</ul>
see the below fiddle
demoFiddle
And if You only want to html css then
try the below fiddle hope it helps.
csshtml dropdown fiddle
What is the best way to toggle display of my second level dropdown menu when hovering over "a"...not when hovering over the full "li"?
I use bootstrap and fiddle is : http://jsfiddle.net/2Smgv/3100/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
I did not understand your question originally, and have updated my "answer" as such:
It is not possible to complete the modification you are requesting because the hover would be broken. The display of and ability to mouse over sublist items functions because those items are within the parent list. If you change the hover to the anchor tag, once you attempt to use the links within the subnav you will be outside of the anchor tag and thus removing the hover effect.
If you look at your markup, the "2-level Dropdown" also contains the and the with class .sub-menu. Thus hovering over the sub-menu is also over the parent (2-level Dropdown).
However, the containing "2-level Dropdown" ends with that text and the moving your cursor over the sibling sub-menu means you are no longer hovering over the .
I hope this explains why it is not possible and allows you to gain an understanding of the reasons why.
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.