I have my dropdown menu in my _Layout.cshtml and clicking on one of the menu items works fine the first time, for example takes me to http://localhost:52098/Home/ViewTable/Scottish Premiership.
If I click on the URL again, it tries taking me to http://localhost:52098/Home/ViewTable/Home/ViewTable/Scottish Premiership
The navigation Code:
div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Scotland <span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="Home/ViewTable/Scottish Premiership">
Scottish Premiership
</a></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
Scottish Championship
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish First Division
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish Second Division
</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
England <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Premier League
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Championship
</a>
</li>
</ul>
</li>
</ul>
// #*#Html.MvcSiteMap().Menu(false, true, true, true, true)
#Html.MvcSiteMap().SiteMapPath()*#
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
</div>
</div>
Looks like it's taking a relative path from the one i'm already on + the href on the link, where as what I really want is an absolute path?
Add '/' to the start of your URLs
like /Home/ViewMain/Scottish ChampionShip
And it is always better to use
#Url.Action("MethodName", "Controller")
e.g.
Test
To pass a Parameter in URL
Test
Related
I'm adjusting someone else's code, html is not my thing. For some reason the code makes the drop down menu change, sometimes to two parts. I would much rather a dropdown menu that just works directly and doesn't change. Was hoping someone can tell me why it acts the way it does.
Below is the code and am including a before and after image
Thanks
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=“/index.html” id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="sales.html">Sales</a>
<a class="dropdown-item" href="/management">Management</a>
<a class="dropdown-item" href="/bartending">Bartending</a>
<a class="dropdown-item" href="/print">My Name In Print</a>
<a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a>
</div>
</li>
</ul>
</div>
usually (but not always) a dropdown list is a nested list inside of an li that is controlled by a button like this
<ul>
<li>regular link</li>
<li>
<button>drop down</button>
<ul>
<li>drop down link 1</li>
<li>drop down link 2</li>
</ul>
</li>
</ul>
so yours might end up looking something like this:
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<button>menu</button>
<ul>
<li><a class="dropdown-item" href="index.html">Home</a></li>
<li><a class="dropdown-item" href="sales.html">Sales</a></li>
<li><a class="dropdown-item" href="/management">Management</a></li>
<li><a class="dropdown-item" href="/bartending">Bartending</a></li>
<li><a class="dropdown-item" href="/print">My Name In Print</a></li>
<li><a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a</li>
</ul>
</li>
</ul>
</div>
Ill also include an example of a drop down I created to help you with those aria attributes sorry in advance for the lack of style on it. Hope this helps.
<header id="sitewide-header">
<ul id="visible-navigation">
<li id="logo-container">vertical template</li>
<li id="control-container"><button id="menu-button" aria-expanded="false" aria-controls="toggled-navigation">menu</button></li>
</ul>
<nav id="navigation-container">
<ul id="toggled-navigation" aria-hidden="true" aria-labelledby="menu-button">
<li>home section</li>
<li>section two</li>
<li>
<button id="dropdown1-button" aria-expanded="false" aria-controls="dropdown-one">three – five</button>
<ul id="dropdown-one" aria-hidden="true" aria-labelledby="dropdown1-button">
<li>section three</li>
<li>section four</li>
<li>section five</li>
</ul>
</li>
<li>section six</li>
</ul>
</nav>
</header>
my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..
I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar
You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}
You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.
Prototyping a categorical classification system, I'm using Boostrap dropdown buttons in a pill-style navigation. I'm not committed to the pills, so if a different class such as a navbar might work instead, I'll change, though I did already try using navbar and button groups.
I don't know for sure that JavaScript inclusions might not be the problem, but I don't have dropdown.js in my distribution of Bootstrap. Compiling a custom version with only the components I need is way beyond my skill and the scope of the project.
CSS and JavaScript inclusions in head tag:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
Code for dropdown list:
<div id="taglist">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="dropdown">
<a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Number<span class="caret"></span>
</a>
<ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
<li><a tabindex="-1" role="menuitem" href="#">One</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
<ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
<li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">children</a></li>
<li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
<li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
<li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
<li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
<li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
<li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
</ul>
</li>
</ul>
</div>
That code follows the example from the getbootstrap.com JavaScript page as closely as possible, except with my own id names.
PaulL, You have a typo in this line...
<ul class="dropdown-menmu" id="actors-list-menu" role="menu"
Just change the dropdown-menmu to dropdown-menu.
I'm not sure what I'm doing wrong in my code here, but it's this or CSS related. I'm not sure what CSS setting this would be, but here is my navbar section of my html code.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
TTT Stats
<span class="caret"></span>
</button>
<a class="navbar-brand" href="index.php">Scoreboards</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a>
</li>
</ul>
</div>
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Other
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a>
</li>
</ul>
</div>
(If anyone is wondering about the names, its for a garry's mod TTT server)
With that code, here is what the complete navbar looks like.
http://i.imgur.com/75cPTRh.png
I would want the two dropdown buttons side by side on that navbar. Now when they are like that, this leads into my next question tied into this. How do you work bootstrap's dropdown CSS if you have more than one button?
This is what I have in my css at the bottom to align the dropdown by the button, so that it is centered correctly below the button and not way over stuck to the left.
.dropdown-menu {
right: 68%;
left: 10%;
}
If there is more than one button, it still centers all buttons to that point on the page. How do I edit their positions individually?
Add btn-group class
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Scoreboards</a>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
TTT Stats <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a></li>
</ul>
</div>
<div class="btn-group dropdown2">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a></li>
</ul>
</div>
</div>
</div>
</nav>
To answer your first question,
you can place your dropdowns inside a structure like this
<div class="container">
<div class="row">
<div class="col-md-2"> <!-- markup for dropdown 1 --> </div>
<div class="col-md-2"> <!-- markup for dropdown 2 --> </div>
</div>
</div>
You can use col classes like these to make the layout of your page using bootstrap's grid system.
To learn more about them, visit:
http://getbootstrap.com/css/#grid
I'm using Bootstrap and I have two dropdowns next to each other, something like this:
|Dropdown1| |Dropdown2|
I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?
Here is my dropdown
<div class="dropdown">
<div class="btn-group" id="storeId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript Tutorial</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>