Create full width drop down menu

In the previous article, we created a mega menu together. This one will guide you on creating a simpler menu which is full width drop down menu. We do not create html item or image as before. Instead, we just generate traditional and simple mega menus.

full width drop down menu

Preparation

As other guides we showed you before, the article “ full width drop down menu ” is not an exception, you should prepare editor software such as notepad++. Also, a browser should be installed on your computer such as IE, Firefox, Chrome, etc.

Implementation

Open the editor software and create a file with the name index.html. You add the following contents to this file and save it.

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>

Next, create a style.css file and add the following contents to, and save it.


nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
nav ul li:hover {
  background: #333333;
}
nav ul li:hover > a{
    color:#FFFFFF;
}
nav ul li:hover > ul {
  display:block;
}
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

Now you check again by opening index.html file with browser. If you follow the guide, the result will be as the figure above.

So, we have just finished the article which is about creating a full width drop down menu. If you have any feedback, please leave a comment. If you could not still do this, please feel free to contact us. Besides, you could download the source code via the link below

Create shopify mega menu code in any theme of your site

You have known how to create a dropdown menu in the previous article. In this one, if you have knowledge about html, css, js, you could create a custom shopify mega menu code. However, if you know a little bit about code, or even know nothing, you still can do this. In this article, I will help you do this step by step. You just need to copy and paste the code to your websites.

shopify mega menu code

As usual, I recommend that newbies should not apply this guide to the working e-commerce websites or projects because the code may affect them. My favorite job is reminding you of duplicating your current theme. Then you can work and edit on the new theme you have created. Below is the common way to duplicate a theme

If you want to add a mega menu on the current top menu, you get to the theme and find the location to place the menu, replace shopify mega menu code in this location.

For example, in the debut theme, you know that the part which displays menu located in site-nav.liquidfile. You should put the old code content between a pair of tags {% endcomment %}{% endcomment %}. At the moment, the old data does not display. You add html to the file out of the two tags. Here we use a code of a simple mega menu. Based on this, you can customize properly.

Here is the html code you could add to file

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fafa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>

Here is the css data you could add in the pair of tags


* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}

The article shopify mega menu code must have helped you use as well as add the code to the Shopify theme. As I mentioned before, you should know about the code to edit the content. Now you get to html part to add text, and link, etc to complete. If you have any question, please contact us so that we can support.

how to add drop down menu in shopify

In the process of developing a website, creating a menu is an integral part. Have you ever ask “ how to add drop down menu in shopify ”. In this article, we will study this issue and find out the solution.

In Shopify, creating a dropdown menu is a little bit different from that in other source codes. It is the reason why many Shopify newbies feel confused when using it. But you should not worry about that, if you do not know what to do, this article is for you.

Firstly, you login the Shopify admin. At the top left screen, you click on Navigation

how to add drop down menu in shopify

The next page will display a list of available menus. Depending on the location of the menu, we decide which menu includes a dropdown menu. Commonly, people choose the main menu to display dropdown, and so is the example in this article. We will choose the Main menu. The list of subcategories will display when we hover to Catalog after completing setups.

how to add drop down menu in shopify

We will create a new menu. Depending on the menu you want to display a dropdown menu when hovering to an item, it will set the same name for the new menu. Look at the figure above, if want Home to display a dropdown menu, you set Home as the name of the new menu, similarly to Blogs. In this example, I need Catalog to display dropdown so I will create a new menu with name Catalog as below

how to add drop down menu in shopify

Now, you could create menu items by clicking on Add menu item. After having created, click on save. Or you can click on the red button Delete menu.

how to add drop down menu in shopify

Creating a dropdown menu is so easy, is it right? However, it is quite strange and different from other source code. Few people know how to do it. This is the reason why when you search on the internet, you may accidentally see “how to add drop down menu in shopify ”.

The article “ how to add drop down menu in shopify ” ends here. I am sure that you can build your own attractive dropdown menu. However, if you want to satisfy your taste, you need to know a little bit about css, js, etc. But if you do not have time to do this task, or you do not know much about css, js, etc I recommend that you should use Mega menu app. By using this app, you can create dropdown menus in bulk depending on your demand. It can help create an unlimited number of dropdown menus. In addition, you can add images, html, lists of best-selling products, a new arrival or a featured product in order to boost sales. You can try the demo version before deciding to use it. You could have a view here

And now, let me know whether your problem is solved or not. If not, please contact us or leave a comment so that we can support you for free. If you have another better solution, please let us and other readers know. We are grateful for your kindness.

Download cleaning invoice pdf and use

Currently, the demand for searching for cleaning invoice pdf  is very huge. Because when using it, you just need to fill in available forms, then print and give them to your customers. The advantage of the pdf file compared with other format texts is that it can be edited by browsers without installing any software.

cleaning invoice pdf

Depending on your demand as well as the field you are working in, you should choose a suitable cleaning invoice pdf template. You can only edit the information of these pdf template files without changing their structures. The advantage of this file type is that you can create the consistency in the invoice in order to maintain your brand. However, this also is the disadvantage because you cannot make a custom, which may reduce your personalization as well as creativity.

These are pdf files which are shared for you to use for free. It is suitable for everyone. It is sure that every people can use them on all devices. There will be no hope anymore.

The usage is quite simple, you could download the pdf file here  or get access to this link

Please input necessary information which are your information or the store information, for instance, name, address, customer’s information, shipping address.

In order detail, please enter product’s name, quantity, price per unit for each product and the percentage of discount. The system will automatically calculate the total amount. You do not have to calculate anything at all, which will reduce the error of doing this manually.

Thank website https://invoicetemplates.com  for sharing this resource for free.

In the previous part, we can create an invoice template bootstrap. If this article, as well as cleaning invoice pdf file, is useful for you, please sharing it so that more and more people have a chance to know about this free invoice file. Thanks you so much.

Moving company invoice pdf for free

You are able to use this file for free. The only things you need to do are downloading this file and inputting all the required information. This pdf file is quite special because you can edit it with different software. You can open it on many browsers which are available in your device such as Google Chrome, Firefox, IE, etc. and click on Print button to print invoices.

moving company invoice pdf

Required information on moving company invoice pdf for free

Similarly to all other invoices, you should input some related information such as your company’s name, address, and contact information like telephone number, and email. Besides, you should enter information of the company to which you send the moving company invoice pdf.

In the below part of the invoice, you should input all the tasks you have completed so that your partner will carry out the payment for you. Or you could also input the product information you have sold to your customers. Depending on your nation orstate imposing the tax on your products or not, you should include this tax on the invoice.

Do I need to send moving company invoice pdf always?

To me, you should always send the invoice to your customers so that you can have a statistic of how many products are sold and how many profits you receive. This feature is so helpful if you want to summarize all the profits and loss or the operating performance of your company.

In the previous part, we can create an  invoice template bootstrap. In this one, you do not have to edit anything or create code. You just need to click and experience. If you have demand for the invoice, you could download this file here

How to create invoice template bootstrap 

invoice template bootstrap is  the invoice template built on html, and css. Besides, the bootstrap library supports to create attractive and responsive invoices more easily. In this article, we will build an invoice step by step.

Idea

This simple invoice template will include the main information as below:

Invoice logo: This can be your company’s logo. You add it in order to promote your brand image.

Invoice number: This number is to distinguish one invoice with the others.

BILLING ADDRESS:  This is the address of goods’ sender

DELIVERY ADDRESS:  This is the address of goods’ receiver

Order detail: This includes product information such as name, quantity, price, shipping amount and a total amount of the invoice.

We will build an invoice template bootstrap being the same as the one in the below figure. Note that this is a simple example, you can absolutely create a more attractive invoice based on it because your creativity is unlimited.

invoice template bootstrap

Preparation

  • Install the editor software which is the most suitable for you such as php designer, notepad++, etc.
  • Download bootstrap library here  and unzip it
  • Download font awesome library here and unzip it

Implementation

Implement as the following order:

Step 1: Create the folder: invoice- template-bootstrap

Step 2: Copy the unzipped bootstrap folder and paste here: invoice- template- bootstrap

Step 3: Copy the unzipped font-awesome folder and paste in invoice- template- bootstrap

Step 4: In invoice- template- bootstrap, create a css folder. In the css folder, create style.css file. Make sure to create the exact following URL: invoice- template- bootstrap/css/style.css

Step 5: Open css file created in step 3 and add and save the below contents to style.css file.


.height {
min-height: 200px;
}
.icon {
font-size: 47px;
color: #5CB85C;
}
.iconbig {
font-size: 77px;
color: #5CB85C;
}

.table >tbody>tr> .emptyrow {
border-top: none;
}

.table >thead>tr> .emptyrow {
border-bottom: none;
}
.table >tbody>tr> .highrow {
border-top: 3px solid;
}
.logo img {width:100px}
.top-header {padding: 15px 0}

Step 6: Create index.html file in root folder of invoice- template- bootstrap

As the same time, make sure that invoice- template- bootstrap folder has the same structure as the figure below:

invoice template bootstrap

Step 7: Open index.html file, input and save the following contents


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="TRAN DINH HONG" />
<title>Simple Invoice Template | PrepBootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row top-header">
<div class="col-xs-2 col-md-3 col-lg-3 pull-left">
<a class="logo" href=""><img src="http://nikrasam.com/media/catalog/product/ct_a683348e01.png" /></a>
</div>
<div class="col-xs-10 col-md-9 col-lg-9 ">
<h2>Invoice number #6789</h2>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-3 col-lg-3 pull-left">
<div class="panel panel-default height">
<div class="panel-heading">BILLING ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3 ">
<div class="panel panel-default height">
<div class="panel-heading">DELIVERY ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">PAYMENT INFORMATION</div>
<div class="panel-body">
<strong>Card Name:</strong> Master Cart<br>
<strong>Card Number:</strong> ***** 556<br>
<strong>Exp Date:</strong> 08/22<br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">ORDER PREFERENCES</div>
<div class="panel-body">
<strong>Gift:</strong> No<br>
<strong>Express Delivery:</strong> Yes<br>
<strong>Insurance:</strong> No<br>
<strong>Coupon:</strong> No<br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item Name</strong></td>
<td class="text-center"><strong>Item Price</strong></td>
<td class="text-center"><strong>Item Quantity</strong></td>
<td class="text-right"><strong>Total</strong></td>
</tr>
</thead>
<tbody>
<tr>
 

Now, you try running it on the browser, the result will be as the first figure. Its advantage is that it could be responsive with different screen sizes due to using Bootstrap library. In fact, using Bootstrap is seldom because most users do not know about programming. Therefore, many supporting tools which make people not have to calculate manually anymore appear. For instance, Pdf Invoice Template is the tool installed in Prestashop source code to support store owners to easily create their own invoices. You could try the demo here. I believe that with its wonderful features, you can save a lot of time spent on processing invoices.

How to create java dropdown menus in website

Java is not only specially used in building apps but also applied to the website development. In this field, we could also talk about JSP language which is used by many big businesses. The article java dropdown menus will help you create a simple menu with this source code.

java dropdown menus

Preparation

Users who use java language for programming should prepare tomcat server. This server is different from the servers exclusively used for PHP and ASP. The java faithful often use exclusive editor software such as eclipse or netbean ide. In the article java dropdown menus, we just need one editor and one browser to check.

Implementation

No matter which language you use to develop your websites, html and css are the two compulsory things you must know. No matter which source code you use, html source code can work well with this. Therefore, you should be skillful in html. You can easily make changes to create an appropriate menu. The code of the menu will be as below

<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
 
</body>

Thus, we have just finished the article java dropdown menus. Hope that you can create more impressive and attractive menus than that in this article. This article just guides you on creating a menu manually. If you want to create menus in your projects, there will be mega menu modules to support you. When using these modules, you do not need to know about code because you just need to get to the backend, and drag and drop.

Mega menu prestashop 1.6 free and & Premium

The article mega menu prestashop 1.6 free and & Premium focuses on the two greatest mega menu modules that I have ever used. It will make you less surprised and confused when applying the modules to your projects. Depending on each demand, you should choose the suitable mega menu. In this article, the advantages of the module are showcased based on my subjective evaluations.

1 Prestashop Vertical dropdown categories

It is the first mega menu prestashop 1.6 free introduced. The order of menus in the list is the order that the author tests menus and it does not relate to the quality of the menus. A good news for you is that these menus and the next menu versions are guaranteed to work well on both Prestashop 1.6 and 1.7

The most important and mainstream feature of the module is the ability to display categories in the form of dropdown. Submenus of the menu items appear on hover.

It allows to configure the depth of the menu and to add images to the menu as well.

For more information about the mega menu, please refer to this link:  https://mypresta.eu/modules/front-office-features/vertical-dropdown-categories-menu.html

mega menu prestashop 1.6 free

2 Mega Menu Builder Module

This is a premiummenu module. However, you should not mind it because it is worth investing in. The fruit you benefit from it outweighs the cost you spend.

When using this module, your menus are styled attractively, and responsive with different screen sizes such as PC, tablet, and mobile phone.

Besides, the submenus have the following features

Drop down tree menu: It allows you to create multi-level submenus. A tree menu is perfect if you have multiple collections, multi-product categories. The module supports creatingan unlimited number of submenu levels.

Tabbed Submenus: This is a perfect menu type for your customer to discover your products, featured collection… etc. You can use dynamic contents (product, collection) or static contents (HTML, Image) for the tab menu.

Links list, links block: Links list is useful for your customer to discover multiple collections, for example, the site. You can set block width, height, number.

Featured products: Increase your sale by displaying your featured product on the menu. Globo Mega Menu supports displaying products on your menu.

Contact Form – Add contact form directly on the menu. Help your customer easily keep in touch with your store.

For more information about the mega menu builder, please refer to this link:  https://addons.prestashop.com/en/menu/29701-mega-menu-builder.html

 

 

The article mega menu prestashop 1.6 free and & Premium talks about my user experience after using the two free and premium modules. How about your opinion of Prestashop modules? Please let us know.

 

Custom fields Prestashop module

Custom fields Prestashop is the module that allows you to add extra fields to a registration form, and checkout page. The module supports all input types, which helps you to create forms with various fields meeting your needs.

Custom fields Prestashop

DRAG AND DROP SUPPORT

In addition, it will be easier than ever for form creation because custom fields module supports for drag and drop. According to statistics, a huge number of users enjoy using drag and drop due to its friendly, visual user interface and time saving.

EASY TO ADD FIELDS TO REGISTRATION FORM

You can add extra fields to a registration page by using drag and drop in the Pretashop registration form of the module’s back office. After registering, customers are able to edit their information and data in item “my account”. In terms of admin, they can change all data about their customers in the back office. Especially, you can choose the place where to locate fields in the registration page.

ADD EXTRA FIELDS TO SHIPPING STEP OF THE CHECKOUT PAGE

In checkout page, you are able to add extra fields to shipping step. This process’s purpose is to collect customer information that is used in the delivery processin order to make sure the most convenient delivery for both store owners, delivery units, and customers.

ADD EXTRA FIELDS TO PAYMENT STEP OF THE CHECKOUT PAGE

Being similar to shipping step, custom fields Prestashop module also supports to create form and display fields in payment step, serving store and shop owners who enjoy editing form themselves.

If you are owninga shop website built on Prestashop platform but you feel that the default registration part of the system still has not met your needs yet. Or you want to edit, add extra fields to checkout step, shipping step, etc. I believe you should consider using this module. Please visit here  . Or if you have any question, do not hesitate to contact us. We are willing to support you.

How to create sticky form in php

Sticky form in PHP is a standard HTML form which saves that data have been entered in a form. It’s really helpful for end-user because they don’t need to re-type data into the form if there’s an error while submitting. Let me give you a real example. When you search in google, the search results are displayed below, while texts still appear in the search box

Sticky form in PHP

 

In the previous posts, we have created PHP code to send email as well as display form data, so we will directly create a simple sticky form in PHP in this tutorial. You can see the demo here.

To create this sticky form, we have to follow 2 steps:

  • Step 1: Taking the data sent by the form by using “GET” method: $data= $_GET[“data”];
  • Step 2: Settings that data as a value for input

By default, the form data will be removed after submitting because of this code line: <input name =”data” value=”” />)

We need to change this code to: <input type=”text” name=”data” value=”<?php echo $data; ?>”>

Source code:

At first, put the sticky-form-in-php folder inside \htdocs folder (if you use xampp). In the sticky-form-in-php folder, create index.php file.


<!doctype html>
<html>
<body>
<?php
if (isset($_GET["data"])){
$data= $_GET["data"];
}
else {
$data= "";
}
<form method="GET" >
Enter content: <input type="text" name="data" value="<?php echo $data; ?>">
<button type="submit">Submit</button>
</form>
 
<?php
if (isset($_GET["data"])){
echo  $data = $_GET["data"];
}
?>
</body>
</html>
</code></pre>
 
Let’s discuss about these codes:
<pre><code class="php">
<?php
if (isset($_GET["data"])){
$data= $_GET["data"];
}
else {
$data= "";
}

These piece of codes means that when client add data to the form fields, the system will assign those values to the data variable. If not, the data variable has an empty value.

In case we don’t provide those conditions, the system will display an error if a user leaves an empty field:

 

Sticky form in PHP

The below code line uses for display textbox data that we have taken from the above step:


<input type="text" name="data" value="<?php echo $data; ?>">

The purpose of these codes is displaying data that’s been entered:

<?php
if (isset($_GET["data"])){
echo  $data = $_GET["data"];
}
?>

We hope that you can know how does the sticky form in PHP work through our tutorial. You can download our source code for reference. We also create a video demo so you can fully understand the steps to create a sticky form. If you need to add form validate you could follow the post.

If you’ve any question or recommendation, please do not hesitate to let us know.