Search code examples
javascripthtmlcsssummary

its possible summary put menu at left like this image?

I see a code http://codepen.io/pdaoust/pen/fHybA

$(function() {
  $('details').on('mouseover focus', function() {
    $(this).attr('open', true);
  }).on('mouseout blur', function() {
    $(this).attr('open', false);
  })
});
html {
  line-height: 1.5;
}
details {
  width: 20em;
  border: 1px solid #ddd;
  padding: 0 .5em;
}
summary {
  padding: 0 .5em;
  margin: 0 -.5em;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  float: right;
  content: '▾';
  width: 1.5em;
  text-align: center;
  margin-right: -.5em;
}
details[open] summary::before {
  content: '▴';
}
<details tabindex=0>
  <summary>Hi, I am a summary.</summary>
  <p>Well I am some content. <a href="#">Here's a link.</a></p>
</details>

for create a hovering menu but i want to know if is possible use this for put menu to left like this image

enter image description here

Please help me

Solution

  • Not without turning the code into something else. The code in that pen is meant to do exactly what it does, show detail text on hover. While menus appear similar, they require code that's a bit more complex. If you want a menu, look for code that's meant for menus.