how i can create Demo Menu to be on hover
Question
Application Type
Reactive

how i can create Demo Menu to be on hover

in need when the mouse dropdwon hover will be show data 

not when i need show data clicked arrow for drop dwon 

if any ides for that 

Solution

Hello Andrew 

Are you looking something like this - https://personal-9qwkrkgl.outsystemscloud.com/ForumHelp/Dropdown?_ts=637583315656912791


Please Hover on Hover Me! 

thanks i created it but if i want replace (Hover Me!) to list which get data from an entity and i need when user select any value from this list the data in hover will be change 

Sorry, I didn't get you correctly - 

Do you want the Top Navigation Items from Database Entity and SubMenu under the Items will also come from Database Entity? 

Please explain me this bit.

See, showing this on Hover is the matter of CSS and Classes added on Containers. You can put the data from Entity as required within the Container. 

You will need to add Fetch Data from Database, Create required Aggregate, and Display data accordingly. 

What exact you need from outside, please feel free to ask.  

when the mouse hover (media center) this block display these data  for Media center

Replying to Manish Gupta's comment on 03 Jun 2021 10:44:50

i need 

when the mouse hover (about ecra) this block display these data  for about ecra  does not display data for media center

how i can do this 

like as at attachment oml

TextEditor.oml

no i need something like this Url https://personal-gvhrgamr.outsystemscloud.com/TextEditor/Screen6?_ts=637583256274879826

but i need when i hover by mouse on another item data in the block will be change


Ahh I thought you are talking about the "ABOUT ECRA" shown in the Menu Block near the Image. So, created solution for the same. But seems you are asking to change the data on TOP NAVIGATION ITEM HOVER. Correct? 

Please look into the Navigation Web Block for the solution and CSS it has. 

SeeNavigationBlock.oml


i have Mega Menu like these in Url https://www.outsystems.com/forge/component-overview/4563/responsive-mega-menu

if i want replace expression(dropdown) to List for item these item come from an entity and i have need  all of item when i hover by the mouse all item display especially data for itself


as like at attachment Oml

Menu.oml

if i have code html like this 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

  font-family: Arial, Helvetica, sans-serif;

}


.navbar {

  overflow: hidden;

  background-color: #333;

}


.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}


.dropdown {

  float: left;

  overflow: hidden;

}


.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}


.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}


.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}


.dropdown-content a:hover {

  background-color: #ddd;

}


.dropdown:hover .dropdown-content {

  display: block;

}

</style>

</head>

<body>


<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>


<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>


</body>

</html>

how i can convert it to screen in reactive web


Solution

Hello Andrew 

Are you looking something like this - https://personal-9qwkrkgl.outsystemscloud.com/ForumHelp/Dropdown?_ts=637583315656912791


Please Hover on Hover Me! 

thanks i created it but if i want replace (Hover Me!) to list which get data from an entity and i need when user select any value from this list the data in hover will be change 

Sorry, I didn't get you correctly - 

Do you want the Top Navigation Items from Database Entity and SubMenu under the Items will also come from Database Entity? 

Please explain me this bit.

See, showing this on Hover is the matter of CSS and Classes added on Containers. You can put the data from Entity as required within the Container. 

You will need to add Fetch Data from Database, Create required Aggregate, and Display data accordingly. 

What exact you need from outside, please feel free to ask.  

when the mouse hover (media center) this block display these data  for Media center

Replying to Manish Gupta's comment on 03 Jun 2021 10:44:50

i need 

when the mouse hover (about ecra) this block display these data  for about ecra  does not display data for media center

how i can do this 

like as at attachment oml

TextEditor.oml

no i need something like this Url https://personal-gvhrgamr.outsystemscloud.com/TextEditor/Screen6?_ts=637583256274879826

but i need when i hover by mouse on another item data in the block will be change


Ahh I thought you are talking about the "ABOUT ECRA" shown in the Menu Block near the Image. So, created solution for the same. But seems you are asking to change the data on TOP NAVIGATION ITEM HOVER. Correct? 

Please look into the Navigation Web Block for the solution and CSS it has. 

SeeNavigationBlock.oml


i have Mega Menu like these in Url https://www.outsystems.com/forge/component-overview/4563/responsive-mega-menu

if i want replace expression(dropdown) to List for item these item come from an entity and i have need  all of item when i hover by the mouse all item display especially data for itself


as like at attachment Oml

Menu.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.