CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Luke B
Luke B

Reputation: 129

Combining two HTML files

I have two separate HTML files both with different css and javascript. The one file is a responsive burger menu and the other a desktop and laptop dropdown menu. I want to know if there is a way of making it so that when the device with is less than 700px it switches from the full navigation bar to the burger menu. Would I have to put both menus into one file?

Upvotes: 3

Views: 272

Answers (2)

Rounin
Rounin

Reputation: 29453

Short answer: You don't have to put both menus into one file.

You have several options:

  1. [Preferred option] You structurally markup the menu once. You then use @media queries in your CSS, to determine the presentation of the menu when device width > 700px and when device width < 700px.

  2. You can use a technique called RESS (Responsive Design + Server-Side Components) to load either one menu or the other. You could do this relatively simply using a short piece of if-else logic and 2 PHP server side includes.

Upvotes: 0

Hulke
Hulke

Reputation: 857

To switch from full navbar to burger menu, checkout the CSS @media rule.

@media screen and (min-width: 700px) {
    /* 
      Your code here (e.g burger menu class set to active)..
    */
}

Upvotes: 1

Related Questions