Begin responsive update
Update HTML to make webpages responsive: created a dedicated nav tag for mobile devices which will be shown based on the screen width with CSS.
This commit is contained in:
parent
0eadba16fe
commit
8d6e6063fb
|
@ -8,18 +8,39 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>luca0N!'s Website</h1>
|
<div>
|
||||||
<nav>
|
<h1>luca0N!'s Website</h1>
|
||||||
<ul>
|
<div id="menu-default">
|
||||||
<!--<li><strong class="currentPage">Index</strong></li>-->
|
<nav>
|
||||||
<li><a href="index.html" class="button">Index</a></li>
|
<ul>
|
||||||
<li><a href="#" class="button">Blog</a></li>
|
<!--<li><strong class="currentPage">Index</strong></li>-->
|
||||||
<li><a href="#" class="button">Announcements</a></li>
|
<li><a href="index.html" class="button">Index</a></li>
|
||||||
<li><a href="services.html" class="button">Services</a></li>
|
<li><a href="#" class="button">Blog</a></li>
|
||||||
<li><a href="contact.html" class="button">Contact</a></li>
|
<li><a href="#" class="button">Announcements</a></li>
|
||||||
<li><a href="privacy.html" class="button">Privacy</a></li>
|
<li><a href="services.html" class="button">Services</a></li>
|
||||||
</ul>
|
<li><a href="contact.html" class="button">Contact</a></li>
|
||||||
</nav>
|
<li><a href="privacy.html" class="button">Privacy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="menu-mobile">
|
||||||
|
<br/>
|
||||||
|
<details>
|
||||||
|
<summary>Menu</summary>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<!--<li><strong class="currentPage">Index</strong></li>-->
|
||||||
|
<li><a href="index.html" class="button">Index</a></li>
|
||||||
|
<li><a href="#" class="button">Blog</a></li>
|
||||||
|
<li><a href="#" class="button">Announcements</a></li>
|
||||||
|
<li><a href="services.html" class="button">Services</a></li>
|
||||||
|
<li><a href="contact.html" class="button">Contact</a></li>
|
||||||
|
<li><a href="privacy.html" class="button">Privacy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<!--[_SWG: $CONTENT]-->
|
<!--[_SWG: $CONTENT]-->
|
||||||
|
|
|
@ -8,18 +8,39 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>luca0N.com</h1>
|
<div>
|
||||||
<nav>
|
<h1>luca0N.com</h1>
|
||||||
<ul>
|
<div id="menu-default">
|
||||||
<!--<li><strong class="currentPage">Index</strong></li>-->
|
<nav>
|
||||||
<li><a href="index.html" class="button">Index</a></li>
|
<ul>
|
||||||
<li><a href="#" class="button">Blog</a></li>
|
<!--<li><strong class="currentPage">Index</strong></li>-->
|
||||||
<li><a href="#" class="button">Announcements</a></li>
|
<li><a href="index.html" class="button">Index</a></li>
|
||||||
<li><a href="services.html" class="button">Services</a></li>
|
<li><a href="#" class="button">Blog</a></li>
|
||||||
<li><a href="contact.html" class="button">Contact</a></li>
|
<li><a href="#" class="button">Announcements</a></li>
|
||||||
<li><a href="privacy.html" class="button">Privacy</a></li>
|
<li><a href="services.html" class="button">Services</a></li>
|
||||||
</ul>
|
<li><a href="contact.html" class="button">Contact</a></li>
|
||||||
</nav>
|
<li><a href="privacy.html" class="button">Privacy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="menu-mobile">
|
||||||
|
<br/>
|
||||||
|
<details>
|
||||||
|
<summary>Menu</summary>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<!--<li><strong class="currentPage">Index</strong></li>-->
|
||||||
|
<li><a href="index.html" class="button">Index</a></li>
|
||||||
|
<li><a href="#" class="button">Blog</a></li>
|
||||||
|
<li><a href="#" class="button">Announcements</a></li>
|
||||||
|
<li><a href="services.html" class="button">Services</a></li>
|
||||||
|
<li><a href="contact.html" class="button">Contact</a></li>
|
||||||
|
<li><a href="privacy.html" class="button">Privacy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<!--[_SWG: $CONTENT]-->
|
<!--[_SWG: $CONTENT]-->
|
||||||
|
|
Loading…
Reference in New Issue