How to make a tab menu website (one page with inside other pages)

php jquery ajax menu tabs

13,497

You can simple achieve this by using jquery Tab plugin .

or you should create your website template in which you replace content through ajax call.

       <html>
         ....

        <body>
            <div class="tab_container">
                <ul>
                       <li> Tab 1</li>
                       <li> Tab 2</li>
                </ul>
                <!-- integrate nested menu here -->
            </div>

            <div id="content">
              onclick on tab selection display appropriate content here
             </div>
        </body>

       </html>

I would suggest you if simply display content on the basis of tab selection than go for Ui-tabs

If you are developing complex website. and you need multiple menu. than try jquery dropdown menu. For displaying content, overwrite content div on the basis of tab selection using ajax as I have mention in my example.

Here is link for jquery drop-down menu

http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501

Live Example

13,497

Author by

re_ru

Updated on June 04, 2022

Comments

re_ru almost 2 years

I would like to make a website with one page that has inside other pages.

To go from one page to another there's a tab or similar menu, so the page doesn't change, only the inner content. The inner content has a lot of jquery and php: one has a form to make a search on the left and the results are shown in the center with datatables, so you can search inside the results, order them, etc, etc. When you switch from one content to another I don't want the content to be reset ( example: you make a search and then you go to another page/inner content , when you come back the results of the search have to be still there). One of the tabs has a list( a submenu). When you select something from that list every page has to know and to use that selected value.

I thought the I can make all this with a lot of ajax, jquery ui tabs and php.

My questions are: it's good to make something like that? Is there another way to achieve what I want? Would it be better to make a normal menu with a lot of pages( no more inner content, but diffrent pages) and keep the selected value in session?In this case how can I keep the results?(session again?)

I hope that this question is allowed. Thank you all!

EDIT: I'm not asking the code( I know how jquery tabs and I searched google). I'm asking if it's a good practice to make something like that( one page with a lot of content) or it's better to use more pages?

EDIT 2: I'll refrase my question. I have to make something like this: 10 pages with different content that have php, jquery inside with a menu to navigate from one page to another. When you go from one page to another the searches and options selected in the pages that you left have to be still there, so that when you go back you can see them. One menu has a submenu with a list. When you select something from that list the selected value changes things in half of the pages(what you see inside). How should I do this?(don't show me code, tell me only what should I use to accomplish this)

EDIT3: I looked online and yahoo mail has what I want. The top of the page is allways the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts only part of the page changes ( my inner content as I called it) and the same happens when you click on the other voices in the menu. Inside contacts, if you click on one contact you can see details about that contact, then if you click on inbox and again contacts you can still see the contact that you selected before. How can I achieve this?