consolidate javascript - hover navigation for revealing content

StackOverflow https://stackoverflow.com/questions/21493663

Question

To briefly describe the intended design: I want a nav menu that, on hover, reveals content. But I am also seeking flexibility and simplicity. Because each nav element behaves in an identical way, I imagine that the javascript and css can be written once with variables that identify each nav element. So far, I have taken a number of different approaches, but the following has worked best for me. Admittedly, it is painfully redundant: 

<div id="leftColumn">
<div id="nav1" 
onmouseover="
document.getElementById('nav1').style.backgroundColor = 'black';
document.getElementById('nav1').style.color = 'white';
document.getElementById('content1').style.display = 'block';"
onmouseout="
document.getElementById('content1').style.display = 'none';
document.getElementById('nav1').style.color = 'black';
document.getElementById('nav1').style.backgroundColor = 'white';">
DECONSTRUCTIONS
</div>
<div id="nav2"
onmouseover="
document.getElementById('nav2').style.backgroundColor = 'black';
document.getElementById('nav2').style.color = 'white';
document.getElementById('content2').style.display = 'block';"
onmouseout="
document.getElementById('content2').style.display = 'none';
document.getElementById('nav2').style.color = 'black';
document.getElementById('nav2').style.backgroundColor = 'white';">
CONSTRUCTIONS
</div>
<div id="nav3"
onmouseover="
document.getElementById('nav3').style.backgroundColor = 'black';
document.getElementById('nav3').style.color = 'white';
document.getElementById('content3').style.display = 'block';"
onmouseout="
document.getElementById('content3').style.display = 'none';
document.getElementById('nav3').style.color = 'black';
document.getElementById('nav3').style.backgroundColor = 'white';">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>

And the relevant (also redundant) CSS:

#nav1 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav2 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav3 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1 {display:none;}
#content2 {display:none;}
#content3 {display:none;}

To reiterate, I want to keep everything as simple as possible, but flexible for future editing - for adding future nav elements and corresponding content. I have searched for solutions and tried other approaches, but each time the javascript/jQuery quickly becomes complicated and beyond my abilities to understand and modify to my liking. Any tips, advice, solutions, explanations, resources... will be much appreciated. Thanks!

Was it helpful?

Solution

You can create two separte functions for mouseover and mouseout event, and can add the naviagtion menu in html, as many as you want.

Here is the complete solution for you.

<html>
<style type="text/css">
/*we can combine the selectors with comman if same css values available for all*/
#nav1, #nav2, #nav3{padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1, #content2, #content3 {display:none;}
</style>
<script>

    function displayContent(div, contentId){
            /*div is reffering the current mouseovered div*/
        div.style.backgroundColor = 'black';
        div.style.color = 'white';
        document.getElementById(contentId).style.display = 'block';
    }

    function hideContent(div, contentId){
        document.getElementById(contentId).style.display = 'none';
        div.style.color = 'black';
        div.style.backgroundColor = 'white';
    }
</script>
<body>
    <div id="leftColumn">
    <div id="nav1" onmouseover="displayContent(this, 'content1')" onmouseout="hideContent(this, 'content1')">
    DECONSTRUCTIONS
    </div>

    <div id="nav2" onmouseover="displayContent(this, 'content2')" onmouseout="hideContent(this, 'content2')">
    CONSTRUCTIONS
    </div>
    </body>
    <div id="nav3" onmouseover="displayContent(this, 'content3')" onmouseout="hideContent(this, 'content3')">
    OBSERVATIONS
    </div>
    </div>
    <div id="rightColumn">
    <div id="content1">deconstructions are...</div>
    <div id="content2">constructions are...</div>
    <div id="content3">observations are...</div>
    </div>
</html>

OTHER TIPS

Instead Of java script to change color.CSS have the property :hover to change when hover happens on some element and for onmouseover and onmouseout pass the function with arguments so to display and hide contents.I have attached the complete code for reference.

<!DOCTYPE html>
<html>

    <head>
        <style>
            #nav1 {
                padding-left:25px;
                width:200px;
                line-height:150%;
                background-color:white;
            }
            #nav2 {
                padding-left:25px;
                width:200px;
                line-height:150%;
                background-color:white;
            }
            #nav3 {
                padding-left:25px;
                width:200px;
                line-height:150%;
                background-color:white;
            }
            #content1 {
                display:none;
            }
            #content2 {
                display:none;
            }
            #content3 {
                display:none;
            }

CSS for hover to change color

            #nav1:hover, #nav2:hover, #nav3:hover {
                background:black;
                color:white;
            }
        </style>

JavaScript

        <script>
            function display(contentID) {
                document.getElementById(contentID).style.display = 'block';
            }

            function hide(contentID) {
                document.getElementById(contentID).style.display = 'none';
            }
        </script>
    </head>

    <body>
        <div id="leftColumn">
            <div id="nav1" onmouseover="display('content1')" onmouseout="
hide('content1');
">DECONSTRUCTIONS</div>
            <div id="nav2" onmouseover="display('content2')" onmouseout="
hide('content2');
">CONSTRUCTIONS</div>
            <div id="nav3" onmouseover="display('content3')" onmouseout="
hide('content3');
">OBSERVATIONS</div>
        </div>
        <div id="rightColumn">
            <div id="content1">deconstructions are...</div>
            <div id="content2">constructions are...</div>
            <div id="content3">observations are...</div>
        </div>
    </body>

</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top