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

Using Javascript to create a new regular expression, we can now read patterns in from

I am currently working on developing a bbcode filtering solution that is compatible with both PHP and JavaScript. Primarily focusing on the JavaScript aspect at the moment, I have encountered an issue with the new RegExp constructor not recognizing pattern ...

javascriptjqueryregexjson

The SyntaxError message indicates that there was an unexpected non-whitespace character found after the JSON data when parsing it

I received an Error message: SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data Here is the code snippet: <script> $(document).ready(function () { $('.edit1').on('change', function () { ...

javascriptphpjqueryajaxjson

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

Issue with AJAX POST request not retrieving data from PHP MySQL database using AJAX

I am facing an issue where the post data is not passing to get-data.php while trying to retrieve data from the database using ajax to insert it into another element. Any thoughts on what might be causing this problem and possible solutions? https://i.stack ...

phpjquerymysqlajax

Creating a popup dialog form using ASP.NET and jQuery within an ASP:FormView control

I'm currently facing an issue where I am utilizing a jQuery popup dialog with an asp:FormView. The purpose of this popup is to allow the user to input a hyperlink, which is then placed in a textbox control within the FormView. The popup dialog div i ...

asp.netjquerydialogpopupformview

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. It displays "Sorted by ascending order" here. The ngx modal theme ...

javascripthtmlangulartypescriptangular-cdk

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...

javascripthtmlcss

Display a tooltip when the cursor hovers close to a line in D3 visualizations

Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when users are in close proximity to the ...

javascripthtmlcssd3.jscharts

Is it possible to have a single listener for all events within the jQuery event namespace?

Is it possible to create a handler that can listen to ALL events within a specific namespace in jQuery using $.fn.on, off, and trigger functions? For example: $(window).on(".event_namespace", function(e){ //handler }); $(window).trigger("testEvent.e ...

javascriptjqueryevents

Ways to stop click propagation in the case of a parent anchor link containing a button among its children

Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...

javascripthtmlcssreactjs

JavaScript incorrectly constructs date strings

Hey there, I've been attempting to create a JavaScript date object using a string but for some reason, it's consistently off by one day. Every time I try, it ends up showing the wrong day. Below is the code snippet in question: var date = new Da ...

javascriptjquerydate

When adding a new div, ensure it is counted and delete it once a new div is added

When clicked, a new div is added. When clicked again, another div with the same content is created as a duplicate. Q: Is there a way to remove the previous div when a new one is created? $(document).on('click', '.LibSectOpen', functio ...

javascriptjqueryhtmldestroy

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

htmlcsshtml-tablewkhtmltopdfellipsis

How to Effortlessly Populate Cascading Dropdowns in ASP.Net MVC 5 using a Reusable

I am currently working on an ASP.Net MVC 5 application that has multiple edit pages. Each edit page consists of various input elements such as textboxes, checkboxes, and dropdowns. I want to implement a functionality where the values of one dropdown are ch ...

javascriptjqueryajaxasp.net-mvc-5

One way to generate div elements based on the number in an input field when a button is clicked, but ensuring it only happens once

What I am attempting to achieve is: Retrieve data from a JSON file upon button click. Display the data in separate boxes, each one different for every element of the array. For instance, if the JSON provides 3 rows of data, there should be 3 distinct box ...

javascriptjqueryhtmlcssangularjs

Ajax modal login feature refuses to close

Struggling to close a modal login box? Everything seems to be functioning correctly with the modal screen and ajax features, but I'm facing issues when it comes to closing the modal form. The code snippet looks like this: HTML: <a href="#" cla ...

javascriptphpjqueryajaxmodal-dialog

Tips on how to maintain the underline when text is split into two sections

Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...

htmlcssunderline

Placing content retrieved from a MySQL database within a form displayed in a ColorBox

Having difficulty inserting text from a MySQL database into a form (textfield) inside a ColorBox. The current script is as follows: <a href="#" class="bttn sgreen quote1">Quote</a> var postQuote[<?php echo 4id; ?>]=<?php echo $f ...

phpjavascriptjquerymysql

jQuery.get() function is limited to specific types of webpages

I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...

javascripthtmljqueryajaxget

An unforeseen issue occurred while trying to access an indexed element ID

I've recently started learning javascript and jquery, and encountered a problem while working on a script. The script is created by php code that reads lines from a file, processes them, and displays them using arrays. In addition, javascript validat ...

javascriptjqueryhtmlvalidationinput