Hello, I am looking to design a side navigation bar that includes menus with dropdown options. Can someone provide assistance with this task? The selected menu will determine the content displayed on the main page using angular ng-view.
Hello, I am looking to design a side navigation bar that includes menus with dropdown options. Can someone provide assistance with this task? The selected menu will determine the content displayed on the main page using angular ng-view.
Give this a try! It could be beneficial for you.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body ng-app="myApp">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#/">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#red">Red</a></li>
<li><a href="#green">Green</a></li>
</ul>
</li>
<li><a href="#blue">Blue</a></li>
</ul>
</div>
</nav>
<p><a href="#/">Main</a></p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
UPDATED 2 :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
p{
margin-left:150px;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
</style>
<body ng-app="myApp">
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#red">Red</a></li>
<li><a href="#green">Green</a></li>
</ul>
</li>
<li><a href="#blue">Blue</a></li>
</ul>
</div>
<p><a href="#/">Main</a></p>
<div ng-view style="margin-left:150px;"></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
I have encountered a challenge while building a large menu using an extensive JSON object. Initially, with around 250 nodes, the performance was acceptable and I considered the project completed. However, the scope has now expanded to require over 3,000 no ...
Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further. Is it feasible t ...
Personally, I believe that removing the backend could be a successful strategy for addressing sysadmin/scale issues. Do you agree with this approach? Is there a proven method for eliminating the backend in web applications that require database access? I& ...
I am facing an issue with my dropdown menus. I want them to only toggle open or close when the dropdown menu itself is clicked, not when any of the list items or other parts of the page are clicked. Below is the code snippet that is causing the problem: ...
My page contains many JQuery objects. Also, there is a form where users can input search terms in different fields and click a search button to send an AJAX request to the server. The resulting HTML is then loaded into a div. However, I am facing an issue ...
Currently, I am retrieving data from an API through a SOAP call. After pulling in the data, the resulting HTML structure appears as follows: <div class="component_wrapper"> 2 man Teams<br> 20 Min AMRAP<br> 50 Double Unders<br> 50 ...
Hey there, I'm currently working on a personal project as a beginner in Bootstrap. My main challenge for the past two days has been trying to integrate a dateTimePicker and number Incrementer using Bootstrap techniques. Despite my efforts in researchi ...
Just starting out with Angular and facing a challenge with handling downloaded JSON data. I wrote this function: for (var i = 0; i < $scope.Objects.length; i++){ $http.get($scope.Objects[i]["Commit"]).success(function(data) { Commit = data ...
I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...
There's a question that has been bothering me for a while, and I couldn't find an answer through my searches. Imagine having $scope set as $scope.object = {id:1, name:"stackoverflow"}; Now, in the HTML code, I want to simply call {{id}} ...
Within my Angular 2 application, I have implemented a collapsible and expandable menu. The issue I am facing is with the toggling of icons - when expanding one menu item, the icon changes correctly but it also changes for all other menu items that are not ...
I am having trouble obtaining the specific response from my curl command. The command successfully inserts data into a list, but I'm unable to capture the desired response. Here is the curl command I am using: curl -d "{"""name""":"""ME""","""id"" ...
I'm in the process of creating a custom part builder and am working on implementing a search function within MySQL Database based on the Part Number generated. The goal is to display the price in a table cell. However, I'm encountering difficulty ...
In my quest to obtain a JSON file using $http.get within a controller, I encountered an issue. Everything works smoothly until I attempt to access the property containing the response. When I use console.log(property) inside $http.get(), it successfully ou ...
HTML <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Categories</a> <ul> <li><a href="#">1</a></li> < ...
I'm facing an issue with aligning the .contact and .subscription divs in the footer. While the .contact div justifies itself at flex-start, the .subscription div isn't justifying at the flex-end as expected. I've tried using justify-con ...
I am working on implementing ParamQuery, which is an Excel-like plugin in PHP. I have managed to fetch data from a PHP file that generates JSON output successfully. However, I am facing difficulties in displaying the data within the div:grid_array in the s ...
In order to share a location with multiple controllers, I have created a service as shown below: angular.module("StockSampleApp") .service("Location", function () { this.currentLocation; }) The main controller in my application is res ...
Currently delving into the world of Vue.js, I've discovered that styling child components is achieved by referencing classes, ids, and tags defined in the component's template. Let's take a look at the App.vue component as an example: <st ...
Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...