CODEWITHSUNDEEP
javascript
juniorDevFla
juniorDevFla

Reputation: 101

Add a dropdown menu next to every links inside a div

I'm looking for a way to put a mini dropdown menu after EVERY link inside a .Post-body div., but I can't find the right way.

My example div: https://jsfiddle.net/0zc4pbqh/2/

<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a> lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum <a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a>  lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p></div>

What is the correct way to do this?

p.s. I want to fill this dropdown with a website screenshot (from an api).

Upvotes: 3

Views: 130

Answers (2)

Trouble
Trouble

Reputation: 90

<script>  
function favTutorial() {  
var mylist = document.getElementById("myList");  
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;  
}  
</script>  
<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/
<select id = "myList" onchange = "favTutorial()" >  
<option> ---Choose tutorial--- </option>  
<option> w3schools </option>  
<option> Javatpoint </option>  
<option> tutorialspoint </option>  
<option> geeksforgeeks </option>  
</select>  </a>

You need to create a select with specific ID and use that ID to display your dropdown list. You can use class also (document.getElementsByClassName) if the content of all the dropdowns are same.

https://www.javatpoint.com/how-to-create-dropdown-list-using-javascript

Please refer to this link also.

Upvotes: 0

Amir Rahman
Amir Rahman

Reputation: 1119

try this although its has some bug when you go bottom of page or right end which can be tweaked

const pbody = document.querySelector(".Post-body"),
        ancS = pbody.querySelectorAll("a"),
        menu = pbody.querySelector(".menu")

ancS.forEach(each=>{
    each.addEventListener("mouseover",e=>{
        let cords = each.getClientRects()[0],
            x = cords.x, 
            y = cords.y,
            offset = {x:0,y:40}
        menu.style.display="block"
        menu.style.left = (x + offset.x) + "px"
        menu.style.top = (y + offset.y) + "px"

        // on menu show (each is current anchor tag)
        menu.innerHTML = "you are hovering over :" + each.href
    })
    each.addEventListener("mouseout",e=>{menu.style.display="none"})
})
.menu {
    position: absolute;
    width: 300px;
    height: 300px;
    background:white;
    box-shadow: 0px 0px 0px 2px black;
    display: none;
}
<div class="Post-body">
    <p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a>
        sdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd <a href="https://www.youtube.com/"
            rel=" nofollow ugc">https://www.youtube.com/</a> dsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd</p>
        <div class="menu">
            this is menu
        </div>
</div>

Upvotes: 1

Related Questions