Create a slightly naughty personal homepage-structure

Create a slightly naughty personal homepage-structure

Directory

Create a slightly naughty personal homepage-menu

Create a slightly naughty personal homepage-structure

First of all, I would like to thank everyone for giving me a face and seeing comments.

However, I forgot to say that the design was inspired by a promotional image of the processing system provided by a design company to a bank. I liked it very much when I first saw it, we use it as our personal homepage. The first sight we see is the publicity picture. The dynamic effect and other pages are our own things.

My personal homepage

Previous Article: Create a slightly naughty personal homepage-menu

The source code is mounted on git.

Source code

If you have git, please remember to give it to Xing ~~~~~~

Here we will talk about the overall structure. First, there are a total of seven menus and five areas.

/* Seven menus */
 
 
    
  
  
My homepage
    
  
  
My information
    
  
  
My album
    
  
  
My Essays
    
  
  
My copy website
    
  
  
My work experience
    
  
  
My games
    
 
 
/* Five Regions */
     
     
     
     
  

Therefore, some regions need to display more than two contents (such as two left and two right ). Therefore, we need to perform some control here. Because there are a lot of other menus, we used ajax to load the pages to be displayed when we clicked other menus for the first time.

As a whole, I closed two packages. One is the event control of the home page, the other is the paging event control, and then run the corresponding paging control js code in the load callback method.

Each time you click, make a judgment to determine whether the page has been inserted. If not, load the page. If yes, it will open normally.

The Code is as follows:

/* Click action on the home page menu */. click (function () {var $ this = $ (this), type = $ this. data ('type'), target = $ this. data ('target'), $ area = $ ('. area _ '+ type), flag = $ area. data ('flag ')? $ Area. data ('flag'): ''; if (target & $ area. find ('. box _ '+ target ). length = 0) {$ area. append (''); $ area. find ('. box _ '+ target ). load (target + ". html ", function () {$ area. find ('. box _ '+ target ). jScrollPane (); $. initModule ({target: target}) ;};} if (target) {$ area. data ('flag', target ). find ('> *'). removeClass ('active'); $ area. find ('. box _ '+ target ). addClass ('active');} if ($ body. hasClass ('Type _ '+ type) & flag = target) return; menuClickType [type] () ;});

A plug-in of the scroll bar -- jScrollPane is used here.

Here the logic may be a bit messy. There are two flags in total, one is the target, the other is the type, the type is the region identifier, and the target is the content identifier.

If the box_target element cannot be found, add one, load it into the target.html page using ajax, and then use the method corresponding to the callback method init.

The page structure is as follows:

/* Loading js in the region */$ (function () {var moduleMap = {'myinformation': myInformation, 'myphotos': myPhotos, 'myarticle': myArticle, 'myrecord ': myRecode, 'mywork': myWork, 'mygame': myGame} $. extend ({initModule: function (settings) {var target = settings.tar get; moduleMap [target] () ;}});

/* Load my information js */function myInformation (){}······}

In this way, the general structure of the entire page is complete, and subsequent code compilation only needs to be written in the corresponding html and function.

Note that the homepage is directly written in. You do not need to add new pages.

Read the original article: Create a slightly naughty personal homepage-structure