Responsive menu does not show

See also questions close to this topic

• How to solve the Josephus problem using javascript

  I wanted to know how to solve the Josepheus problem using the most simple javascript code.

  There are n people standing in a circle waiting to be executed. The counting out begins at some point in the circle and proceeds around the circle in a fixed direction. In each step, a certain number of people are skipped and the next person is executed. The elimination proceeds around the circle (which is becoming smaller and smaller as the executed people are removed), until only the last person remains, who is given freedom. Given the total number of persons n and a number k which indicates that k-1 persons are skipped and kth person is killed in circle. The task is to choose the place in the initial circle so that you are the last one remaining and so survive.

  let n=41; // the number of persons in circle
  let k=1; // the number of people that will be skipped
  for (int i = 0; i < n; i++)
  {
      arr[i] = 1; // alive state, 0 will set when it's dead state
  }
  

  The expected result will be the position of the last alive person in the circle.
• Search for a span inside a span in testcafe

  <mat-option class="select-bank-option mat-option ng-star-inserted mat-selected mat-active" role="option" data-cy="selectDKCAD" tabindex="0" id="mat-option-261" aria-disabled="false" aria-selected="true"><!---->
     <span class="mat-option-text"><!----><img class="margin-right-10 ng-star-inserted" height="14px" src="/public/images/flags/dk.svg">
     <span>CAD - DnB - Bank DK CAD - 96321234567896</span><!----></span>
     <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
  </mat-option>
  

  I am trying to select the span depending on the name of it.

  I am trying to click on a dropdown menu generated by angular, that has the text "CAD - DnB - Bank DK CAD - 96321234567896"

  I have tried:

      .click(Selector('mat-option-text').with(bank))
  

  and

  .click(Selector('span').with(bank))
  

  where 'bank' is the parameter of the method, and in both cased it can not find the option in the dropdown menu.
• HTML Audio accessibility with Input Range

  I have an input (type range) with is used in conjunction with an HTML <audio> element. The <audio> element's controls are hidden, providing the user only with the input range as a control.

  Minimal problem example: https://codepen.io/sidouglas/pen/LYPZaOG

  The issue is that when the input range is focused, with either Chrome Vox or Mac's Voice over — every value of valuetext is read out.

  <input
    aria-label="Seek"
    aria-valuemin="0"
    autocomplete="off"
    class="audio-file-player__slider-range u-color-gray-111111 u-width-100"
    min="0"
    role="slider"
    step="1"
    type="range"
    v-bind:aria-valuemax="valueMax"
    v-bind:aria-valuenow="valueNow"
    v-bind:aria-valuetext="currentTime + ' of ' + totalDuration"
    <!-- the above line this is spoken every time the current model changes.-->
    v-bind:max="duration"
    v-model="current"
  />
  

  Contrast this to the very accessible https://plyr.io/#audio component.

  While focused on the range slider, its aria-valuetext value continues to udpdate, while not being verbally announced continually - (at most twice)

  Now I can do some hackery involving v-on:focus to stop the v-bind:aria-valuetext being updated, but does anyone know how plyr.io does it?
• Change Selections Based upon Email Value Entered in Text Box

  I have a list of "UPON LOGIN-GO TO" values in a drop-down list, and would like for that list of options to dynamically change based upon a specific username (email address) entered (the super user).

  I have seen a few solutions here which use JQuery that come close, but none that do what I am looking for. I tried without success to modify the code I found, but could not get it to work.

  Based upon entry of a static username, a different set of options would be shown, as that user is the super user, and his/her options are different.
• CSS / HTML - How Can I align html elements printed in a loop?

  I'm printing a loop dynamically in a col-3. Each column contains 4 html elements.

  1. An Image
  2. A Title
  3. Some text content
  4. A button

  Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?

  Made a code pen below with a similar example of my problem below and code for reference.

  https://codepen.io/JWILLZ/pen/QWLEoxZ

  <div class="container">
    <div class="row">
        <div class="col-3">
          <h2 class="pb-4">Title1</h2>
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title2</h2>
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title3</h2>
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title <br> 4</h2>
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
    </div>
  </div>
  
• How to only add content in the first type element?

  I'm trying to add content with :before, only for the first "small" element but my current code only adds the content before all the "small" elements?

  small:nth-of-type(1):before {
    content: 'ONE TIME OFFER - ONLY ';
    color: #cc3300;
    font-weight: 700;
  }

  <div><span class="bold_help_text"><small> first text content!</small></span></div>
  <div class="option_textbox">
    <span class="bold_help_text"><small>second text content!</small></span>

  I expect the text "ONE TIME OFFER - ONLY" to be in the first "small" element but it appears in both.
• Is there a way of centering a single <div> contents vertically without affecting the contents of the <div> sibling?

  I have multiple div wrap around a parent with display set to flex. I want to vertically align (as in vertical-align:middle) and also horizontally align (as in text-align:center) any content that will be put into the LAST div ONLY, such as Privacy Policy, Terms of Use, social media buttons, etc without affecting other sibling which is currently displaying as expected.

  I tried setting the parent to display as flex and setting both justify-content and align-items to center, but it affected all the children - not just the LAST DIV (which isn't what I want).

  Using vertical-align:middle; doesn't seem to work either.

  Here's the STYLESHEET:

  
  #footer-container{
          width:100%; min-height: 200px;
          background: lightblue; border:2px solid blue;
          }
          #div-wrap{
              display: flex; flex-flow: row wrap; justify-content: space-between;
  
              font-size:1rem;
              width:95%;
              margin: 0 auto;
              }
              #div-wrap div{
                  border:2px solid red;
                  min-width:200px; height: 200px;
                  margin:4px auto; padding: 0 3px;
                  display: inline-block; 
                  font-size: 1.3rem;
                  }
                  h5{
                      font-size:1.125rem;
                      padding:5px;margin:0px;
                      }
  
   /*  The code below can be modified for the question...  */
              .terms{
                  width: 300px; background-color: yellow;
                  color:green; font-weight: bolder; text-align: center;
                  vertical-align: middle; /* Does;nt work, dont know why */
                  margin-left: auto; margin-right: 6px;
                  }
  
  

  and here's the HTML:

  
  <section id="footer-container">
               <div id="div-wrap" >
  
                  <div>
                      <h5>Quick Link Title</h5>
                      <ul> </ul>
                  </div>
                  <div>
                      <h5>Quick Link Title</h5>
                      <ul> </ul>
                  </div>
                  <div>
                      <h5>Quick Link Title</h5>
                      <ul> </ul>
                  </div>
                  <div>
                      <h5>Quick Link Title</h5>
                      <ul> </ul>
                  </div>
  
                  <div class="terms" >
  
                      <p><small>Copywrite &copy;2019. All right reserved</small></p>
  
                  </div>
  
              </div>
          </section>
  
  
• How can I remove a item class from a child's item in css and react?

  I want to delete a class or its effect if the parent element has no thanks element, or be able to choose to refer to its reference so that it can be selected, but I can't find a solution on the Internet and some of my ideas have already been used and I need some suggestion in that situation do. The situation is as follows: I have a menu in which the submenu is nested and the whole is guided by a recursive function that calls itself going down levels if taxonomies in the menu have children. And now I want to remove the effect on items that don't have children, which means that the menu can be expanded with the arrow.

  A recursive function that calls itself creating categories (parents) and subcategories (children).

  
  function NavBarLink({ ...props }) {
    const [classOpener, setClassOpener] = useState(false);
    const pathToCategories = `/categories/${props.codename}`;
    const dispatch = useDispatch();
  
    function handleTaxonomies(codename) {
      dispatch(catchCodeNameTaxonomies(codename));
      setClassOpener(!classOpener);
      return codename;
    }
  
    return (
      <span
        className={(classOpener && "opener active") || (!classOpener && "opener")}
      >
        <Link
          to={ pathToCategories }
          onClick={() => handleTaxonomies(props.codename)}
        >
          {props.name}
        </Link>
      </span>
    );
  }
  
  function NavBarItem({ ...props }) {
    function generateLink() {
      return (
        <NavBarLink
          name={props.name}
          codename={props.codename}
        />
      );
    }
    function generateSubmenu() {
      return <Menu items={props.terms} />;
    }
    function generateContent() {
      const content = [generateLink()];
      if (props.terms) {
        content.push(generateSubmenu());
      }
      return content;
    }
    const content = generateContent();
    return (
      <li> {content}</li>
    );
  }
  export default function Menu({ ...props }) {
    function generateItem(item) {
      return (
        <NavBarItem
          name={item.name}
          terms={item.terms}
          codename={item.codename}
          onClick={props.handleId}
        />
      );
    }
  
    const items = props.items.map(generateItem);
    return <ul className="menu-ul-child">{items}</ul>;
  }
  

  

  EDIT:: My new solution with purpose:

  function NavBarLink({ ...props }) {
    const [classOpener, setClassOpener] = useState(false);
  //add two icons
    const arrow = <i class="fas fa-chevron-up"></i>;
    const arrowDown = <i class="fas fa-chevron-down"></i>;
  
    function handleTaxonomies() {
      setClassOpener(!classOpener);
    }
  
    return (
         //your purpose
      <span
        className={`opener ${classOpener ? "active" : ""}`}
      >
        <Link
          className="d-flex justify-content-between"
          to={pathToCategories}
          onClick={() => handleTaxonomies(props.codename)}
        >
          <span>
            {props.name}
          </span>
        //add two icons depending on the state
          <span>
            {props.showArrow ? (classOpener ? arrow : arrowDown) : ""}
          </span>
        </Link>
      </span>
    );
  }
  
  function NavBarItem({ ...props }) {
    function generateLink() {
      return (
        <NavBarLink
          name={props.name}
          codename={props.codename}
        //your purpose
          showArrow={props.terms && props.terms.length > 0}
        />
      );
    }
  }
  
• What commands should I use to create an interactive menu?

  I'm writing a code that makes me interact with a text menu, the problem and I can't find the right commands I need.

  This code will serve me for a future text adventure minigame that I would like to make. I looked at different forums, tutorial on YouTube, tried different commands like If, ​​khbit, _getch, etc... This is code created:

  #include <iostream>
  #include <conio.h>
  #include <windows.h>
  using namespace std;
  int p;
  int s;
  void down();
  int i;
  int a;
  int main()
  {
      while(i=1)
      {
                system("cls");
                down();
                }
                }
                void down()
                {printf("Start\nRules\nExit\n");
      if(p==s)
      {
                          system("cls");
                      printf("#Start#\nRules\nExit\n");
                      }
                      if(_getch()==13,a=2)
                      {
                                          system("cls");
                                      printf("Start\n#Rules#\nExit\n");
                                      }
                                      if(_getch()==13,a=3)
                                      {
                                                          system("cls");
                                      printf("Start\nRules\n#Exit#\n");
                                      Sleep(1000);
        }
  }
  

  This command should bring up a text:

  Start Rules Exit

  The enter key with the command (_getch () == 13) trigger_command printf("#Start#\nRules\nExit\n") until printf("Start\nRules\n#Exit#\n"). 13 in getch stands for the ascii code of the enter key and I initially thought that the command would only work by pressing that key, but not it is so. What I would like is that by pressing 1 or plus specific buttons i trigger one command esp: type I press the key A B and activate a command other than B A.
• Is there a jQuery function that allowes me to show and hide specific div's?

  I have a menu with 4 buttons (each button leading to a submenu). Every menu is a specific div, with an id. Everytime someone clicks on a menu item, a submenu shows, and hides the main menu, with the help of .show, .hide. Everytime a submenu is shown, there's also a 'go-back' button, that has to hide the shown submenu, and show the main menu again, and so forth

  I've tried jQuery click, show and hide functions, on all the buttons and div's. But couldn't find a short/clean function that allowes me to do the same thing for multiple div's

  Here is some simple jQuery code what i already tried:

  {% extends "base.twig" %}
  
  {% block header %}{% endblock %} 
  
  {% block content %}
      <div class="screen">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-md-6 col-sm-6 col-6 bg-blue">
                      <a href="{{site_url}}/tablet-menu"><img class="logo" src="{{assets}}/img/logo.png"></a>
                  </div>
                  <div class="col-md-6 col-sm-6 col-6 bg-yellow">
                      <div class="row">
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/nl.svg">
                          </div>
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/gb.svg">
                          </div>
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/de.svg">
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/fr.svg">
                          </div>
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/it.svg">
                          </div>
                          <div class="col-md-4 col-sm-4 col-4">
                              <img class="flag" src="{{assets}}/img/ru.svg">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
  
          <div class="container-fluid" id="menu">
              <div class="row">
                  <div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
                      <div id="weed-tab">
                          <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                          <p class="menu-name">Wiet</p>
                      </div>
                  </div>
              </div>
              <div class="row justify-content-md-center">
                  <div class="col-md-2 col-sm-2 col-2">
                      <div id="indica-tab">
                          <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                          <p class="menu-name">Indica</p>
                      </div>
                  </div>
                  <div class="col-md-2 col-sm-2 col-2">
                      <div id="sativa-tab">
                          <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                          <p class="menu-name">Sativa</p>
                      </div>
                  </div>
                  <div class="col-md-2 col-sm-2 col-2">
                      <div id="hybrid-tab">
                          <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                          <p class="menu-name">Hybrid</p>
                      </div>
                  </div>
              </div>
          </div>
  
          <div class="container-fluid" id="weed-menu">
              <div class="row">
                  <div class="col-md-2 offset-md-5">
                      <div class="back-btn">
                          <img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
                      </div>
                  </div>
              </div>
          </div>
  
      </div>`
      <script>
          $('#weed-tab').click(function(){
              $('#menu').hide();
              $('#weed-menu').show();
              $('.back-btn').show();
          });
  
          $('.back-btn').click(function(){
              $('#menu').show();
              $('#weed-menu').hide();
          });
      </script>
  {% endblock %}
  

  I would like to have a functionality, that allowes me to show and hide those menu's including going back to the main menu, without having a single function for every div as in my example above.
• How to fix materialize responsive navbar

  I have a small problem with MaterializeCss Nav-bar.

  Everything is ok, but when i shrink my browser, nav-bar overlaps. It is chaning on widht: 993px What should i write in my css file with @media to change it

      <div class="navbar-fixed">
        <nav class="nav-wrapper">
          <div class="container">
            <a href="#" class="brand-logo"><img src="img/logo.png" alt="logo"></a>
            <a href="#" class="sidenav-trigger" data-target="mobile-menu">
              <i class="material-icons">menu</i>
            </a>
            <ul class="right hide-on-med-and-down">
              <li><a href="#">Home</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#company">Company</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#" class="tooltipped btn-floating btn-small amber darken-1" data-position="bottom"
                  data-tooltip="Instagram">
                  <i class="fab fa-instagram"></i>
                </a></li>
              <li><a href="#" class="tooltipped btn-floating btn-small amber darken-1" data-position="bottom"
                  data-tooltip="Facebook">
                  <i class="fab fa-facebook"></i>
                </a></li>
              <li><a href="#" class="tooltipped btn-floating btn-small amber darken-1" data-position="bottom"
                  data-tooltip="Twitter">
                  <i class="fab fa-twitter"></i>
                </a></li>
            </ul>
            <ul class="sidenav grey lighten-2" id="mobile-menu">
              <li><a href="#">Home</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#company">Company</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </nav>
      </div>
  
• A good alternative to this use of CSS "width: fit-content" in a responsive layout?

  I'm working on creating a responsive layout for this website: https://json-z.org/

  The layout follows a typical pattern of spreading out horizontally when screen real estate permits, but then using more and more vertical stacking of components as screen/window dimensions narrow.

  At phone-sized portrait widths, however, I found I needed to squeeze things just a bit more than vertically stacking could accomplish. My first method of paring down required width looked like this:

  @media screen and (max-width: 374px) {
    .details-wrapper {
      margin: -10% -15% -15% -10%;
    }
  
    .details {
      transform: scale(0.80);
    }
  }
  

  This got the job done, but I really wanted something that smoothly applied just as much scaling down as necessary, and no more, for any particular screen width, and that also automatically computed just the right margins to match any particular scaling factor.

  To make a long story short, I created an Angular component to do the job, and the code can be found here: shrink-wrap.component.ts, shrink-wrap.component.html, shrink-wrap.component.scss.

  What concerns me is that I'm relying on width: fit-content to make this work.

  .outer-wrapper {
    position: relative;
  }
  
  .sizer {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: -1000;
  }
  
  .inner-wrapper {
    overflow: visible;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
  }
  

  The MDN website describes fit-content as:

  This is an experimental API that should not be used in production code.

  Despite this warning, however, the CSS is working well for Chrome on Windows and Mac, Firefox on Windows and Mac, and Safari on Mac and iOS (as tested on both a big iPhone XS Plus and a tiny iPhone 5S). It works OK on Edge for typical desktop usage, but falls a part a bit at very narrow window sizes.

  Oddly enough, the following is not listed as experimental:

  .some-class {
    display: grid;
    grid-template-columns: fit-content(100%);
    ...
  

  ...but wasn't anywhere near as compatible across as many browsers.

  Can anyone recommend a better alternative to fit-content?

  What I need is for the container of the panel I'm trying to shrink to go no smaller than the minimum the panel requires, while both a sibling of that container, and the parent of both, get smaller as screen/window width demand.

  

  While inner-wrapper is 362 pixels wide, sizer and outer-wrapper are both only 336 pixels wide, and it's precisely this ratio, 336/362, that tells me the exact amount of scaling that I need.
• Responsive grid menu position

  I started a website html css with three columns using www.responsivegridsystem.com.

  I modified it to have:

  1. In plain page:

  One column Left for the menu, one Middle for submenu, one Right for content (when we press a link in the Middle submenu).

  2. In small screens max w 800px:

  Left menu goes up, Middle becomes "left", Right stay on the Right.

  3. For devices max w 500px:

  Left menu is hidden and opened with a "burger" button, Middle is on plain view and once we choose a link the Right comes up.

  ---

  My problem is I need to keep Middle for the selection (no "display=none") but I want it to disappear when Right comes up. For the moment Middle is always above Right no matter if z-index wants to hide it.

  Any clue to invert the display and put Right over Middle ?

  ---

  Here's a fiddle with the code.

  https://jsfiddle.net/1henzys0/

  Resize the window view to see what I mean.

  Thanks for helping me.

  *,
  *:before,
  *:after {box-sizing: border-box;}
  
  html,
  body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  body {
  	overflow-x: hidden;
  	font-family: "Helvetica Neue", Arial, sans-serif;
  	font-size:11pt;
  	line-height: 16pt;
  	letter-spacing: 0.3pt;
  	-webkit-font-smoothing: antialiased;
  	font-weight: normal;
  	background: white;
  	color: black;
  }
  
  /*---------- COLUMNS ----------*/
  
  
  .Left {
  	margin: 0;
  	padding: 30px;
  	width: 210px;
  	background-color: #FFF;
  	position: fixed;
  	height: 100%;
  	overflow: auto;
  }
  
  .Middle {
  	width: 200px;
  	padding: 30px;
  	margin-left: 160px;
  	background-color:aliceblue;
  	position: fixed;
  	height: 100%;
  	overflow: auto;
  }
  
  .Right {
  	padding: 30px;
  	margin-left: 360px;
    background-color: darkseagreen;
  	max-width: 1000px;
  }
  
  .Left a{
  	display:block;
  	color: black;
  	text-decoration: none;
  	border-bottom: none;
  }
  
  .Left a:hover{
  	text-decoration: underline;
  	-webkit-text-underline-position: under;
  	-ms-text-underline-position: below;
  	text-underline-position: under; 
  }
  
  .Middle a{
  	display: block;
  	color: black;
  	text-decoration: none;
  	border-bottom: none;
  }
  
  .Middle a:hover{
  	text-decoration: underline;
  	-webkit-text-underline-position: under;
  	-ms-text-underline-position: below;
  	text-underline-position: under; 
  }
  
  a.title{
  	display: block;
  	margin-bottom: 16pt;
  }
  
  .Left a.icon {
  	display: none;
  }
  
  @media screen and (max-width: 800px) {
    .Left {
      width: 100%;
      height: auto;
      position: fixed;
  	z-index: 999;
  	padding: 16pt 0 16pt 16pt;
    }
  	
    .Left a {float: left;margin-right:20px;}
    div.content {margin-left: 0;}
  
  a.title{
  	display: none;
  }
  
  .Middle{
  	margin-left: 0;
  	padding-top: 50pt;
  	padding-left: 16pt;
      z-index: 997;
  }
  	
  .Right{
  	margin-left: 200px;
  	padding-right: 10px;
  	padding-top: 50pt;
      z-index: 998;
  }
  
  }
  
  @media screen and (max-width: 520px) {
    a:hover{
  			border-bottom: none;
  		}
  
  		img{
  			border: 0;
  			width: 100%;
  			height: auto;
  		}
  
  		.Left a {
  			display: none;
  		}
  
  		.Left a.icon {
  			float: right;
  			display: block;
  			padding:4pt 0 4pt 4pt;
  			border-bottom: none;
  			font-size: 16pt;
  		}
  
  		.Left a.title {
  			float: left;
  			display: block;
  			margin-bottom: 0;
  		}
  
  		.Left a:hover {
  			text-decoration: none;
  			border-bottom: none;
  		}
  
  		.Left.responsive .icon {
  			display:none;
  		}
  
  		.Left.responsive a {
  			float: none;
  			display: block;
  			text-align: left;
  		}
  
  	  .Middle{
  		 	padding: 60pt 8pt 4pt 8pt;
  		  	z-index:997;
  		}
  	  
  	  .Right{
  		  margin: 0;
  		  padding: 28pt 8pt 4pt 8pt;
  		  z-index:999;
  	  }
  	  
  }

  <!doctype html>
  <html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html, follow, all; charset=utf-8;">
  	<meta http-equiv="content-language" content="fr">
  	<meta name="robots" content="All,index,follow">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	
  	<title>Columns</title>
  	
  	<link rel="stylesheet" type="text/css" href="style.css" />
  	
  	<!--[if lt IE 8]>
  	   <style type="text/css">
  	   li a {display:inline-block;}
  	   li a {display:block;}
  	   </style>
  	   <![endif]-->
  		
  </head>
  
  <body>	
  	
  <div class="Left" id="nav">
  		<a class="title" href="index.php">Titre</a>
  		<a href="#">News</a>
  		<a href="#">About</a>
  		<a href="#">Works</a>
  		<a href="#">Texts</a>
  		<a href="#">Books</a>
  		<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
  
  <div class="Middle">
  	
  		<a href="ex-sample.php">Titre 1</a>
  
  		<a href="#">Titre 2</a>
  
  		<a href="#">Titre 3</a>
  
  		<a href="#">Titre 4</a>
  
  		<a href="#">Titre 5</a>
  	
  </div>
  
  <div class="Right">
  
  <p>
          liuqhiudbvlsjfbhn lijqh fliu rfglhw dfljv bwdlfjgvlis uer bgluqfvkqdsn fmiohze fliubera uihbe:rgsdfbhvkjwx cbvljher gimq enrf,bcqfvkh mjrqe viulh mrotgkjn qejrkbg laierhg msjbxcjkvhjmdfkn glu hrgoùjqe iughdkjfgn lrhgiuqe ghemgohdfl gjqemorihg qe oqdhgkjn er moei gqm gqeg hmoqrhgkj qdfvomi moh gmo mhrgo qmog gmo qeromig hmoeh gf
      </p>
  							
  	<p>
          liuqhiudbvlsjfbhn lijqh fliu rfglhw dfljv bwdlfjgvlis uer bgluqfvkqdsn fmiohze fliubera uihbe:rgsdfbhvkjwx cbvljher gimq enrf,bcqfvkh mjrqe viulh mrotgkjn qejrkbg laierhg msjbxcjkvhjmdfkn glu hrgoùjqe iughdkjfgn lrhgiuqe ghemgohdfl gjqemorihg qe oqdhgkjn er moei gqm gqeg hmoqrhgkj qdfvomi moh gmo mhrgo qmog gmo qeromig hmoeh gf
      </p>
  	
  	<p>
          liuqhiudbvlsjfbhn lijqh fliu rfglhw dfljv bwdlfjgvlis uer bgluqfvkqdsn fmiohze fliubera uihbe:rgsdfbhvkjwx cbvljher gimq enrf,bcqfvkh mjrqe viulh mrotgkjn qejrkbg laierhg msjbxcjkvhjmdfkn glu hrgoùjqe iughdkjfgn lrhgiuqe ghemgohdfl gjqemorihg qe oqdhgkjn er moei gqm gqeg hmoqrhgkj qdfvomi moh gmo mhrgo qmog gmo qeromig hmoeh gf
      </p>
      
  	<img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/F8C9/production/_106398636_mediaitem106398635.jpg" width="100%">
  
  </div>
  
  <script>
  function myFunction() {
      var x = document.getElementById("nav");
      if (x.className === "Left") {
          x.className += " responsive";
      } else {
          x.className = "Left";
      }
  }
  </script>
  
  
  </body>