I'm creating a sidebar navigation. I want the circles (.circle-indicator) to disappear when the sidebar (.nav-sidebar) expands on hover. Can this be done with CSS or do I need to use javascript? How would I do this?
Here's the code for the page
body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>
Use
.nav-sidebar:hover .circle-indicator{
display:none;
}
body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator{ display:none; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>
This rule will do that
.nav-sidebar:hover .circle-indicator {
display: none;
}
Or with a transition
.nav-sidebar:hover .circle-indicator {
opacity: 0;
transition: opacity 0.5s;
}
Sample snippet
body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar:hover .circle-indicator { opacity: 0; transition: opacity 0.5s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>
Good answers by LGSon and Brad, but I'd do it with opacity
and a transition
. You cannot transition dispay: none
body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; transition: opacity 1s; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator { opacity: 0; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>
You can create this effect with the following styles
<style>
.nav-sidebar:hover .circle-indicator {
display:none;
}
</style>
body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator { display:none; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.