What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this.

https://i.sstatic.net/R46Ko.jpg

My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project.

Here is the CSS code:

ul.navbar-nav > li > a {
    padding: 60px 0 16px;
    text-align: center;
    position: relative;
    min-width: 110px;
}

ul.navbar-nav > li > a > i {
    position: absolute;
    top: 10px;
    padding-top: 10px;
    left: 0;
    font-size: 25px;
    right: 0;
}

ul.navbar-nav > li {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}

ul.navbar-nav > li:before {
    content: '';
    position: absolute;
    height: inherit;
    width: inherit;
    border-radius: 50%;
    border: 1px solid white;
    transition: all 0.3s linear;
}

ul.navbar-nav > li:hover:before {
    transform: scale(30);
}

Here is a simple example of HTML code:

<li class="nav-item active">
    <a class="nav-link" href="#">
        <i class="fas fa-th-large fa-2x"></i>
        <span>Home</span>
    </a>
</li>

I found inspiration from this demo:

https://i.sstatic.net/hbSe2.png

htmlcssbootstrap-4

Answer №1

Implement a hover effect on the a element

.nav-link:hover {
   border-radius: 50%;
   border:1px solid blue;
   padding:20px;
 }

Customize the border color as desired

Answer №2

To create a hover effect on the <a> tag, you simply need to add a hover function. See an example below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be hindering the activation of my button click event?

Below is the js file I am currently working with: var ButtonMaximizer = { setup: function () { $(this).click(function(){ console.log("The maximize button was clicked!"); }); } }; $(docum ...

javascripthtmljquery-mobile

Problem encountered when closing a lightbox on ASP.net using C# during page load

Can you explain the events that are triggered when the ASP.NET page load event occurs? I am currently using a lightbox for some insertion tasks, and after the insertion is complete, I want the parent page to reload with the new value displayed in the gri ...

c#javascriptasp.nethtmlsql-server

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

javascripthtmljqueryanimationsvg-animate

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

cssangularjscheckbox

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Making sure that the div elements are stacked vertically once the top div expands in size

I am dealing with a situation where I have two divs that showcase a list of elements for the user to interact with via a search bar. This is followed by a "Done" button to finalize their selection. <div class="dropdown col" id="dropdown-s ...

htmlbootstrap-5

Shell script for swapping all occurrences of :*; with a comma

Below are some CSS color variables defined in hex: --state-success-text: #3c763d; --state-success-background: #dff0d8; To create a comma-separated list of these color variables, the output should look like this: state-success-text, state-success ...

cssbashsedcss-variables

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

javascripthtml

Guide to highlighting input field text using Angular

I've set up an angular page that includes an input field within its template. My goal is to highlight the text in the input field when a specific function is triggered. When I refer to "highlighting the text," I mean (check out the image below) https ...

htmlangulartypescriptinput

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

javascripthtml

JS filter function is not functioning as expected. It's unclear what the issue might be

Check out my previous inquiry What could be the issue with my filter? I've implemented a filter, but it seems to have some glitches when dealing with specific values. The 'No Record Found' message doesn't appear as expected in certain ...

javascriptjqueryhtml

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

javascripthtmlcssw3cw3c-validation

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

htmlcssborderborder-radius

Aligning multiple spans vertically within a div of varying height (ui-select-multiple)

I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...

htmlcssvertical-alignmentui-select

Using jQuery's .html() method will remove the selected attribute from the dropdown menu option

When generating HTML dynamically, a select element is included. After choosing an option inside it, everything works fine. For example: <div id="test"> <select> <option value="1">1</option> <option value="2" selec ...

jqueryhtml

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

Icons from Material Design Lite are not appearing as expected when integrated into an Angular project

Recently, I integrated MDL into my Angular project. While most of it is functioning properly, the MDL icons seem to be giving me trouble... I've implemented them using <i class="material-icons">share</i>, but instead of displaying as an i ...

cssangularjsmaterial-design

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

javascripthtmlcssangularprimeng

What causes Windows 7 users to consider the VS Code website unsafe?

What causes Windows 7 users to view the VS Code website as unsafe? Visit the image link here ...

html