Smartphone Header Component for Smartphone

The template part of header part of all pages. When you start to create a new website, please edit this template's design by Html.

The desktop browser version is Header part.

Appearance

The appearance of header part is below.

smart phone header part

This part is common part in the website. Almost all of the page has this part.

The header has logo of this website with link to the top page of smart phone page. When you build your website, change it by manipulating the html and uploading your image file.

The "Site Menu" link is a pop up menu implemented by the style sheet, using "hover" style. by clicking the menu link, popup with links to the 2nd level document appears.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The html of smart phone header is below.


The header part is simple html. in order to replace the logo, you have to upload image from the "Resources" tab menu, at first.

image upload

Click the "New Image" button and select the logo file and upload it. After that, your logo image file will be shown in the list of resources.

After upload image, replace the "src" attribute and save the html.

Edit Style Sheet

The style sheet for the Html is below.

The style to the "#header ul li ul" is for pop up menu. This ul tag has 2 styles for normal status and hovered status. The normal status is not displayed. And when the element selected and style for "hover" is enabled, it appears.

Server Side Program

The server side program to get data from database is below.

Main part

The pain part of this program is below.

The main program does following operations.

  • Get current document node's data
  • Get 2nd level nodes by SQL
  • Get the 3rd level nodes for each 2nd level nodes by calling "secondPages()" function.

Go to Top