Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home page, I want the Home button to be red and all other buttons to remain grey. The existing CSS code is as follows:

@font-face {
font-family: 'WebSymbolsRegular';
/* Rest of the CSS code */
}

/* Additional PHP code would go here */

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Nikolaos Tselikas</title>

        /* More HTML content goes here */
        
    </body>
</html>

You can find more information about my work by checking out my contact info or browsing through the publications section.

jqueryhtmlcss

Answer №1

$('.ca-menu li').click(function() {
  $('.ca-menu li').removeClass("active");
  $(this).addClass("active");

});
.active {
  background-color: red!important;
}
@font-face {
  font-family: 'WebSymbolsRegular';
  src: url('websymbols/websymbols-regular-webfont.eot');
  src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.ca-menu {
  padding: 0 0 0 48px;
  margin: 20px auto;
  width: 1020px;
}
.ca-menu li {
  width: 189px;
  height: 189px;
  border: 10px solid #f6f6f6;
  overflow: hidden;
  position: relative;
  float: left;
  background: #fff;
  margin-left: -48px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}
.ca-menu li:last-child {
  margin-right: 0px;
}
.ca-menu li a {
  text-align: left;
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  position: relative;
}
.ca-icon {
  font-family: 'WebSymbolsRegular', cursive;
  font-size: 40px;
  color: #f6f6f6;
  ;
  line-height: 60px;
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0px;
  top: 30px;
  text-align: center;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}
.ca-main {
  font-size: 24px;
  position: absolute;
  top: 110px;
  height: 80px;
  width: 170px;
  left: 50%;
  margin-left: -85px;
  opacity: 0.8;
  text-align: center;
  color: #555;
}
.ca-sub {
  display: none;
}
.ca-menu li:hover .ca-menu li. {
  border-color: #333;
  z-index: 999;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.ca-menu li:hover .ca-icon {
  color: #000;
  font-size: 60px;
  text-shadow: 0px 0px 1px #000;
  -webkit-animation: moveFromBottom 300ms ease;
  -moz-animation: moveFromBottom 300ms ease;
  -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main {
  color: #000;
  -webkit-animation: moveFromBottom 500ms ease;
  -moz-animation: moveFromBottom 500ms ease;
  -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(200%) scale(0.5);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
  }
}
@-moz-keyframes moveFromBottom {
  from {
    -moz-transform: translateY(200%) scale(0.5);
    opacity: 0;
  }
  to {
    -moz-transform: translateY(0%) scale(1);
    opacity: 1;
  }
}
@-ms-keyframes moveFromBottom {
  from {
    -ms-transform: translateY(200%) scale(0.5);
    opacity: 0;
  }
  to {
    -ms-transform: translateY(0%) scale(1);
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ca-menu" style="float:left;">
  <li class="active">
    <a href="#">
      <span class="ca-icon">F</span>
      <div class="ca-content">
        <h2 class="ca-main">Exceptional Service</h2>
        <h3 class="ca-sub">Personalized to your needs</h3>
      </div>
    </a>

  </li>
  <li>
    <a href="#">
      <span class="ca-icon">H</span>
      <div class="ca-content">
        <h2 class="ca-main">Creative Storytelling</h2>
        <h3 class="ca-sub">Advanced use of technology</h3>
      </div>
    </a>

  </li>
  <li>
    <a href="#">
      <span class="ca-icon" id="heart">N</span>
      <div class="ca-content">
        <h2 class="ca-main">Infographical Education</h2>
        <h3 class="ca-sub">Understanding visually</h3>
      </div>
    </a>

  </li>
  <li>
    <a href="#">
      <span class="ca-icon">K</span>
      <div class="ca-content">
        <h2 class="ca-main">Sophisticated Team</h2>
        <h3 class="ca-sub">Professionals in action</h3>
      </div>
    </a>

  </li>
  <li>
    <a href="#">
      <span class="ca-icon">L</span>
      <div class="ca-content">
        <h2 class="ca-main">Unconditional Support</h2>
        <h3 class="ca-sub">24/7 for you needs</h3>
      </div>
    </a>

  </li>
</ul>

Answer №2

Here is a method to add all li elements with specific mouseover and mouseout styles:

<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'">

Integrate this code into your file:

<ul class="ca-menu">
    <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'">
        <a href="indexenactive.php?menu=home">
            <span class="ca-icon">F</span>
            <div class="ca-content">
                <h2 class="ca-main">Home</h2>
                <h3 class="ca-sub"></h3>
            </div>
        </a>
    </li>
    ...
    <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'">
        <a href="indexenactive.php?menu=contact">
            <span class="ca-icon">@</span>
            <div class="ca-content">
                <h2 class="ca-main">Contact</h2>
                <h3 class="ca-sub"></h3>
            </div>
        </a>
    </li>
</ul>

Check out the DEMO FIDDLE for a preview.

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

Is it feasible to utilize a CSS variable within a CSS "background URL" property?

Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried: In global.css: :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } In s1.css: @import url("global.css"); body { background-co ...

cssbackground-imagecss-variablescss-import

What could be causing the message "Please right click to enable Adobe Flash Player" to appear on my site?

Recently, every time I try to reload my webpage, a strange message from Adobe Flash Player pops up and quickly disappears, even though I don't have any flash animations on my site. It's puzzling me as to why this is happening. If you'd like ...

google-chromeflashreactjshtmlmaterial-ui

Embed programming into an iframe upon its loading

I am looking to enhance the functionality of an iframe by injecting HTML and JavaScript code into it upon loading. The goal is to enable users to navigate through different links within the iframe while they are browsing. Here is what I have attempted so ...

javascriptjquery

What is the best way to make text appear as if it is floating in Jade or HTML?

Currently, I am facing an issue with a Jade file that displays an error message when a user tries to log in with incorrect credentials. The main problem is that this error message disrupts the alignment of everything else on the page, as it is just a regul ...

javascripthtmlpug

Search for the next input using jQuery, then trigger a select event on keypress excluding any buttons

Is there a way to modify my code so that when the user presses "enter", it selects the next visible input or select element, without including buttons in this selection? $(document).on('keypress', 'input, select', function (e) { if (e. ...

javascriptjquery

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

Can you suggest the best HTML5 structure for a multi-chapter novel?

In the process of creating a small HTML5 book with chapters and sections, I encountered a dilemma when it comes to structuring my documents like this: chapter1.html - introduction to chapter 1 chapter1section1.html - section 1.1 chapter1section2.ht ...

htmlmarkup

Is it recommended to utilize the jQuery Ajax API within jQueryMobile?

Currently, I am in the process of developing a Mobile web application using HTML5, CSS3, JavaScript, and jQueryMobile. I will then encapsulate it with Phonegap. As someone who is new to web development, I find myself pondering whether when utilizing jQuer ...

jqueryajaxcordovajquery-mobileweb

The ion-item is refusing to be centered on the page

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

htmlcssionic-frameworkionic4

Discrepancy in Code Outputs

Last night, I spent some time testing out code for basic functions. To preview my work, I used two platforms - Dash and JSFiddle. Everything seemed to be running smoothly on both sites. However, when I uploaded the code to my live website, none of the butt ...

javascriptjqueryhtmlappend

Flexbox does not seem to be cooperating with CSS Auto Width

Hello Overflowers, I've designed an HTML page with the following specifications: 1. Resetting HTML, BODY, DIVs, and SPANs to have no border, padding, margin, or outline 2. Setting display properties for HTML, BODY, and DIV elements 3. Defining hei ...

csslayoutflexbox

Understanding how to extract a specific value key from a JSON object in Typescript while utilizing Angular can greatly

I'm currently facing a challenge in Typescript with Angular where I need to retrieve a specific value from a JSON constant. While I am aware of the performance implications, I am wondering if there is a more efficient way to access this value within t ...

htmljsonangulartypescriptfrontend

The JQuery button fails to activate the service call through Ajax

I'm facing an issue with my JSON service while trying to make an AJAX call using jQuery on a webpage. Even though I have created a button and attempted to trigger the click event, I am not receiving any alert message and the service call itself is not ...

c#jqueryajaxwcf

Sending JavaScript/jQuery variables to a different PHP page and navigating to it

For a while now, I've been working on: Executing a .js file on the client side (successful). Passing the returned object (the variables returned) as an array to another php page for further processing (successful but with issues). The first point, ...

javascriptphpjqueryajax

What is the best way to display JSON data in a Django template?

Looking to extract data from a URL in this format: http://www.example.com/data?format=json The output will resemble the following structure: student_details: { terms: { subjects: { assigments: { id:11, name:"ass_1 ...

jquerypythondjango

Troubleshooting a Minimum Width Problem in HTML and CSS

Having trouble with setting a minimum width for a specific section. When the browser size is smaller than the set minimum width, the background color/image defined by CSS does not expand beyond the window size. Essentially, when scrolling horizontally to v ...

htmlcss

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

What is the best way to conceal a div when there are no visible children using AngularJS?

I need help with hiding a parent div only if all the child items are invisible. I have successfully hidden the parent when there are no children, but I am struggling to figure out how to hide it based on visibility. <div ng-repeat="group in section.gro ...

javascriptjqueryhtmlangularjsvisibility

Creating a stylish button using Bootstrap in an MVC Core HTML Tag Helper

I recently scaffolded a table in MVC and created a view. I would like to customize the Edit button by changing it to a blue Bootstrap button. How can I accomplish this? Existing Code: <td> <a asp-action="Edit" asp-route-id="@ ...

htmlasp.net-mvcasp.net-core-mvcbootstrap-4

What is the best way to adjust a map to completely fill the screen?

I am experiencing an issue with my Openlayer map not fitting to full screen automatically. Despite trying various settings, I am unable to resolve this issue. Can anyone suggest what might be causing this problem? Thank you in advance https://i.stack.imgu ...

javascripthtmlcssreactjs