I'm making a larger website using HTML, css, JSP and Java-servlet.
I've made a menu using < nav> < ul> < li> (navigation). When i hover, sub-menus drop-down. It looks like this:
I want to reuse this menu on all my pages. It will change a lot so I need Single Source of Truth - No duplication of code. I've been looking in to php/js but haven't been able to get it to work.
I imaging that it will work like this:
File only containing the HTML-code (like my menu) that are reused on all pages.
File that make the magic work.
Few lines of code that gets added to each page, at the place the menu should be. (maybe a line to tell what script it runs)
Notes:
I'd like this to work for most (if not all) web-browsers.
The drop-down menu should go over text below.
use the include feature given by jsp:
<%# include file="menu.html" %>
You can also try using the Tiles framework . Look here for more info
Related
everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.
I write 4 sections pages in index html page and i want link the sections page with the menu.
How can I show the content of section when click at each menu?
I use ready website from bootstrap and edit it and I use atom program.
What i should to write at page html or at javascript?
Below is my code:
I concur with NewtoJS you should post a code snippet instead of an image, and you are asking at least 3 questions any way I will try to help
1.- I want link the sections page with the menu?
you can do so using The HTML < a> tag that defines a hyperlink, which is used to link from one page to another.
2.- how to show content of section when click at each menu?
this can have many different aproaches but since you tagged the question with html I will try to answer acordingly. Each section should have its own html file, or and "ID" if they are in the same page when you click on a < a> tag refering to that page or "ID" it will lead to that section.
3.- what i should to write at page html or at javascript ?
of course a web site can be done without using Javascript it is easy but you need to use CSS as well for styling purposes. Generally you can't choose just one, you have to use both and depending on your needs could be more from one than the other. please refer to this site for a complete documentation on HTML
and you can read about javascript here, if you want to learn CSS please refer to this page.
a side comment:
for a complete documentation on how to use html < a> tags please refer to this >site
I will suget not to use POOPSTRAP, and you should try to work with wordpress or something like that if you dont know how to code, and if you want to learn to code starting in stackoverflow is a bad aproach, you should first take a free course on udemy.
I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize
I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it
I am new in web development. I am using the following Wordpress theme: http://test.dominikos.com/
I'd like to disable the top menu effects and make it look like simple white boxes with links.
Obviously there is a JavaScript code that needs to be disabled which I can't find.
Is there a way to locate the file via Firebug?
Thanks in advance
You need to purchase before making changes
Hi, you can't edit the free templates on WordPress. You first need to purchase the theme and then look for the JS which is causing this.
View the source code to view the file
However, You can still view the source code, just go to the link that you're on. And right-click and select View Source Code or try the keyboard shortcut of CTRL + U. You'll see the source code of the website.
Go and buy it and then edit it
But remember that you can't remove or edit the files and layout of the free templates.
Go and buy it, then you'll be able to edit its view! Otherwise, you might need to create your own template by using this scratch of source code. Then you'll be able to create the theme of your own choice.