You are here

floating_menu.css in Floating Menu 8

#block-floatingmenu {
  position: fixed;
  right: 0;
  top: 35%;
  display: block;
  z-index: 10;
}
.popup-item {
  margin-bottom: 5px;
  height: 50px;
  width: 70px;
  color: #000;
  position: relative;
}
.item-text {
  display: block;
  float: left;
}
.item-icon {
  display: block;
  float: right;
  position: absolute;
  right: 0;
  text-align: center;
  line-height: 50px;
  z-index: 999;
  box-shadow: 0px 0px 5px 2px #999;
}
.item-text {
  background: #fff;
  display: block;
  width: 230px;
  top: 0;
  bottom: 0;
  right: -240px;
  position: absolute;
}
.menu-item-popup {
  min-height: 50px;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 0px 5px 2px #999;
}
.item-icon {
  height: 50px;
  width: 50px;
  background-color: #fff;
}

@media (max-width: 768px) {
  #block-floatingmenu {
    display: none;
  }
}

File

css/floating_menu.css
View source
  1. #block-floatingmenu {
  2. position: fixed;
  3. right: 0;
  4. top: 35%;
  5. display: block;
  6. z-index: 10;
  7. }
  8. .popup-item {
  9. margin-bottom: 5px;
  10. height: 50px;
  11. width: 70px;
  12. color: #000;
  13. position: relative;
  14. }
  15. .item-text {
  16. display: block;
  17. float: left;
  18. }
  19. .item-icon {
  20. display: block;
  21. float: right;
  22. position: absolute;
  23. right: 0;
  24. text-align: center;
  25. line-height: 50px;
  26. z-index: 999;
  27. box-shadow: 0px 0px 5px 2px #999;
  28. }
  29. .item-text {
  30. background: #fff;
  31. display: block;
  32. width: 230px;
  33. top: 0;
  34. bottom: 0;
  35. right: -240px;
  36. position: absolute;
  37. }
  38. .menu-item-popup {
  39. min-height: 50px;
  40. padding: 10px;
  41. background: #fff;
  42. box-shadow: 0px 0px 5px 2px #999;
  43. }
  44. .item-icon {
  45. height: 50px;
  46. width: 50px;
  47. background-color: #fff;
  48. }
  49. @media (max-width: 768px) {
  50. #block-floatingmenu {
  51. display: none;
  52. }
  53. }