Using spry menu to create master page - html

Dreamweaver has spry menu function which lets user creating navigation bar quickly.
Suppose I have multiple pages in a web site, the navigation bar are all same.
Can we borrow the concept of master page from asp.net?
I mean that to create master page by using spry menu?
Thanks

With pure html/css ... No you can't.
With the use of PHP, ASP, or a similar server side technology you could.
On second thought maybe you could use AJAX to load the menu in with the jQuery library.
http://api.jquery.com/load/
$('#menu').load('menu.html');
So add jQuery to your web page. Then add the script above and where currently have the Spry menu put...
<div id="menu"></div>
Put the code for the menu you just removed into a file called menu.html.

Related

How to make a subpage in simple html?

I am making an internally used html site for my company. I am a beginner at html and have done this by using a template form W3school. The site will be used to look up different work procedures for internal use only and will run on our server (not on the internet).
In the main site (main.htm) I have a menu bar on the left with links to subpages (sub1.htm, sub2.htm and so on). As it is now I use iFrame to open the subpages in my main site. This way the entire site including the menu bar will stay and only the subpage will load when I change subpage. My issue is that I cannot go directly to a subpage by typing main.htm/sub5 or similar. I always have to start at the main.htm and then click the link to a certain subpage. If I open the specific subpage from the file sub5.htm it will open but without the menu bar as this is not included in the .htm code.
Is there a better way to make the subpages open on the main page?

How to create a css navbar?

I'm using Django to handle my templates. From the picture I am trying to explain what I want in the web page. For convenience I have given the number for the blocks in the picture. I have created blocks 3,4 5,6, and 7 in one .html file.
I actually want navbar1 and navbar2 to display in every page of my project, and that's why I have to create one separate .html file for each. The problem is that I'm not able to apply two navbars in one html file. I also tried with the sidebar (for navbar2), but have faced some issues.
Dropdown button doesn't work on the sidebar and,
When I reload the page, the menu of the side bar will display first and then the sidebar will overwrite the menu and then visualize properly.
Please suggest to me how I can design the page for navbar1 and navbar2 in one html file.
Creating a base.html template that all other templates inherit/extend from should do the trick. Here's a website post going in depth upon how to accomplish this: https://tutorial.djangogirls.org/en/template_extending/

Angular page navigation in the side menu

I want to implement a page navigation in a side menu in my angular page like this.
But I couldn't find any like this component in the Angular Material or Bootstrap.
Is there any good library that offers a page navigation in a page side?
Or do I just need to write a code myself to implement this?
If you will take a look at the source you will see they are using <aio-toc ng-version="8.1.0-next.1">
When you will look for it you will see the source code over here:
https://github.com/angular/angular/tree/master/aio/src/app/custom-elements/toc

Intel XDK page navigation

I recently started creating a website with Intel XDK and I found out I couldn't navigate between pages. Is there any way to go about this? I just want to link all the pages on my navigation bar.
You can add id for each navigation section and use the following to navigate as you like,
$("#yournavid").click(function() {
window.location.href = "yournavigationpage.html";
});
or simply add
href="yournavigationpage.html"
on navigation section in HTML itself
You can use the built-in navigation control in templates like the List View or Side-by-Side menu.
Here is an example of list View template. In most of the cases you use the 'Go back' button to the page you are in to go back to where you came from.
http://hodentekmobile.blogspot.com/2014/09/creating-projects-with-intel-xdk.html
If you are working with the Designer, you should have an index_user_script.js file. That file manages all the triggers for changing pages. There, you just place that:
$(document).on("click", "#yourIdname", function(evt)
{
//IF IT IS A PAGE YOU SHOULD USE ACTIVATE_PAGE
activate_page("#mainpage");
//IF IT IS A SUBPAGE YOU SHOULD USE ACTIVATE_PAGE
activate_subpage("#inicio");
});

Using framesets with Google appengine

I was wondering if anyone could show me an example for using html framesets with google appengine for python 2.7. What i want to do is have two frames, one static frame containing a sidebar with buttons and then another frame to the right of it that shows different pages depending on which button is selected.
As others have commented, this is something that can be solved client-side and you shouldn't be using frames.
Zurb foundation offers navigation similar to what you are requesting.
http://foundation.zurb.com/docs/navigation.php
Similarly, Twitter bootstrap also offers navigation that would enable you to build the functionality you are requesting.
http://twitter.github.com/bootstrap/components.html#navbar
A plugin that will help you keep a sticky side menu can be found here: http://mojotech.github.com/stickymojo/
In response to your comment:
To dynamically load content into the 'frame' alongside the menu bar, you can use jQuery load function.
http://api.jquery.com/load/
It allows you to fetch a page from the server and replace an elements content with the fetched content.