skip to Main Content

I am using the menu from example10 css from the webpage http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html
how can i modify it so that the menu item for the current page will be a different color from the others?
what i want to do is: when i am at the home page. i want the button for home to be lets say red and all the others to be grey like they are. when i am at researh the button for reseach to be red others to be grey like they are and so on –
the code for the css as it is now is:

@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{
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;        
}
}

the php code is:

            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <title>Νικόλαος Τσελίκας</title>
                    <meta charset="UTF-8" />
                    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
                    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
                    <meta name="description" content="Creative CSS3 Animation Menus" />
                    <meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
                    <meta name="author" content="Codrops" />
                    <link rel="shortcut icon" href="/alice/images/favicon.jpg" /> 
                    <link rel="bookmark icon" href="/alice/images/favicon.jpg" />
                    <link href="stylem.css" rel="stylesheet" type="text/css" />
                    <link rel="shortcut icon" href="../favicon.ico"> 
                    <link rel="stylesheet" type="text/css" href="css/demo.css" />
                    <link rel="stylesheet" type="text/css" href="css/style10.css" />
                    <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
                    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
                            $(".contactLink").click(function(){
                                if ($("#contactForm").is(":hidden")){
                                    $("#contactForm").slideDown("slow");
                                }
                                else{
                                    $("#contactForm").slideUp("slow");
                                }
                            });
                        });
                        function closeForm(){
                            $("#messageSent").show("slow");
                            setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
                       }

            $(document).ready(function() {
              function filterPath(string) {
                return string
                  .replace(/^//,'')
                  .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
                  .replace(//$/,'');
              }
              $('a[href*=#]').each(function() {
                if ( filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/,'') ) {
                  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
                  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
                   if ($target) {
                     var targetOffset = $target.offset().top;
                     $(this).click(function() {
                       $('html, body').animate({scrollTop: targetOffset}, 1000);
                       var d = document.createElement("div");
                    d.style.height = "101%";
                    d.style.overflow = "hidden";
                    document.body.appendChild(d);
                    window.scrollTo(0,scrollToM);
                    setTimeout(function() {
                    d.parentNode.removeChild(d);
                        }, 10);
                       return false;
                     });
                  }
                }
              });
            });
            /*! Smooth Scroll - v1.4.5 - 2012-07-22
            * Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */
            </script>
            <style>

            hr {
                display: block;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
                margin-left: auto;
                margin-right: auto;
                border-style: inset;
                border-width: 1px;
            } 
            table, th, td {
                border: 1px solid black;
            }
            </style>
                </head>
                <body>
                    <div class="container">
                        <div class="header">


                            <div class="clr"></div>
                        </div>

                        <div class="content">
                            <a href="indexactive.php" style="margin-right:10px;"><img src="images/Greece.png"  align="right"></a><a href="indexenactive.php"  style="margin-right:10px;"><img src="images/english.png" align="right"></a>
                            <ul class="ca-menu">
                               <li>
                                    <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>
                                    <a href="indexenactive.php?menu=research">
                                        <span class="ca-icon">L</span>
                                        <div class="ca-content">
                                            <h2 class="ca-main">Research</h2>
                                            <h3 class="ca-sub"></h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="indexenactive.php?menu=teaching">
                                        <span class="ca-icon" id="heart">U</span>
                                        <div class="ca-content">
                                            <h2 class="ca-main">Teaching </h2>
                                            <h3 class="ca-sub"></h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="indexenactive.php?menu=publication">
                                        <span class="ca-icon">a</span>
                                        <div class="ca-content">
                                            <h2 class="ca-main">Publications</h2>
                                            <h3 class="ca-sub"></h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="indexenactive.php?menu=projects">
                                        <span class="ca-icon">`</span>
                                        <div class="ca-content">
                                            <h2 class="ca-main">Projects</h2>
                                            <h3 class="ca-sub"></h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <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>



                        </div><!-- content -->
                    </div>
                    <div style="clear:both; margin-left: 15%; width: 70%;height: 100%;margin-top: 250px;text-align:justify;">
                    <?php

                                $menu = $_GET['menu'];

                                if (empty($menu)){$menu = "home";}
                                if  ($menu  == "home"){
                                    echo " <p>Dr. Nikolaos D. Tselikas received both his Dipl.-Ing. Degree and his PhD Degree from the School of Electrical and Computer Engineering of National Technical University of Athens (NTUA) in 1999 and 2004, respectively. During 1999 - 2004 he was a research associate in the Intelligent Communications and Broadband Networks (ICBNet) Laboratory of NTUA. During 2004 - 2008 he was a senior post-doctoral researcher in the same Laboratory in NTUA. During 2006 - 2009 he was also a Visiting Lecturer, during 2009 - 2013 he was a Lecturer and he is currently a tenure-track Assistant Professor at the Department of Informatics and Telecommunications, University of Peloponnese (UoP).</p><p>
            He has participated in several European and National research projects regarding network services and applications. His research interests include the research areas of creation and provision of telecommunications services in fixed and mobile networks, mobile applications, software and middleware technologies, open APIs, web technologies etc. He has collaborated in software design and development topics with big players in the telecom and informatics industry as well as with national and international universities and academic institutions.</p><p>
            Dr. Nikolaos D. Tselikas has published over 60 papers in the pre-mentioned areas in international Journals, Conferences and Book Chapters. His book "C: From Theory to Practice" is proposed as the main textbook for C-programming course in about 50 Departments of Greek Universities and Technical Institutions. Since 2014, the book has been translated in English and it is available by <a href="https://www.crcpress.com/C-From-Theory-to-Practice/Tselikis-Tselikas/9781482214505"target="_blank">CRC Press</a>, while it is the proposed textbook in several Universities worldwide. He is member of several Technical Committees in international conferences and a reviewer in numerous international journals. He is a member of the IEEE and a member of the Technical Chamber of Greece.</p>";
                                echo "<br><br>";
                                echo "<a href="Tselikas_cv_el.pdf">Curriculum vitae:  <img src="images/cv_icon1.jpg" alt="Smiley face" height="60" width="50"> ";
                            } elseif ($menu == "research") {
                                 echo "<h1> RESEARCH INTERESTS </h1>";
                                ECHO "<HR>";
                                echo "</ul>";
                                echo "<li> Service Creation and Provision in Mobile and Fixed Telecommunication Networks</li>";
                                echo "<li> Location Based Services, LBS</li>";
                                echo "<li> Unified Service Control in Heterogeneous Network Environments</li>";
                                echo "<li>  VoIP and IPTV</li>";
                                echo "<li> Open APIs and middleware technologies</li>";
                                echo "<li>  Web Services and Distributed Objects' technologies</li>";
                                echo "<li> Open source licensing</li>";
                                echo "<li> Mobile services and applications </li>";
                                echo "<li> Context-aware services and mashup applications</li>";
                                echo "<li> Design and implementation of handover algorithms for Radio over Fiber (RoF) Networks</li>";
                                echo "<li>  Internet of Things</li>";
                                echo "</ul>";


                            }elseif ($menu == "teaching") {

                                 echo "<ul id="menu">";
                                     echo "<li><a href="#pps_m" class="home">UNDERGRADUATE<span></span></a></li>";
                                     echo "<li><a href="#pms_m" class="about">POSTGRADUATE<span></span></a></li>";

                                 echo "</ul>";





                            echo "<div id="page3">";
                              echo "<a id="pps_m"></a>";
                              echo "<h1>Teaching</h1>";
                              echo "<hr>";
                              echo "<ul>";
                              echo "<table bgcolor="#000000" width="100%">";
                              echo "<td>";
                              echo "<p style="color:#fff"><b>UNDERGRADUATE</b></p>";
                              echo "</td>";
                              echo  "</table>";
                                echo "Department of Informatics and Telecommunications (University of Peloponnese)";
                                echo "<li><a href="http://eclass.uop.gr/courses/TST197/">"Introduction to Programming – C Programming Language" </a>(1st semester)</li>";
                                 echo "<li><a href="http://eclass.uop.gr/courses/TST236/">"Design and Implementation of Internet Services and Applications</a>"</li>";
                                 echo "<li><a href="http://eclass.uop.gr/courses/TST218/">"Distributed Systems Programming"</a> (7th semester)</li>";
                                 echo "</ul>";       
                            echo "</div>";
                            echo  "<br><br><br><br><br><br><br>"; 
                             echo "<div id="page4">";
                              echo "<a id="pms_m"></a>";
                              echo "<ul>";
                              echo "<table bgcolor="#000000" width="100%">";
                              echo "<td>";
                              echo "<p style="color:#fff"><b>POSTGRADUATE</b></p>";
                              echo "</td>";
                              echo  "</table>";

                                echo "<li>MSc in "Advanced Telecommunications Systems and Networks" at Department of Informatics and Telecommunications (University of Peloponnese)</li>";
                                echo "<li><a href="http://eclass.uop.gr/courses/TST291/">"Internet Applications and Services"</a> (1st semester)</li>";
                                echo "<li>MSc in "Computer Science and Technology" at Department of Informatics and Telecommunications (University of Peloponnese)</li>";
                                echo "<li> <a href="http://eclass.uop.gr/courses/DIT128/">"Internet Programming"</a> (2nd semester)</li>";
                                echo "</ul>";
                            echo "</div>";
                            }elseif ($menu == "projects") {
                                echo "<h1>PROJECTS</h1>";
                                ECHO "<HR>";
                                echo"<ul>
                                <li><b>WiSe-PON - "Converging FTTx and Broadband Heterogeneous Wireless Services over Next-Generation Radio-over-Fiber Passive Optical Networks [09ΣΥΝ-71-1155]"</b><br>Design, implementation and performance evaluation of hanfoff algorithms in RoF networks @60GHz and call admission control policies in heterogeneous broadband next-generation networks.</li>
                                <li><b>StuDiAsE - "Student Diagnosis, Assistance, Evaluation System based on Artificial Intelligence [MIS 379389]"</b><br>Design and implementation of a student diagnosis, assisance and evaluation system with artificial intelligence and fuzzy logic techniques in educational environments, either theoretical or laboratory ones. </li>
                                <li><b>e-tourism - "Innovative web/mobile GIS/LBS e-Services with Augmented Reality features for the tourism sector [11ΣΥΝ-10-1180]"</b><br>Design and implementation of Location Based e-tourism mobile services and applications for smartphones with augmented reality features. </li>
                                <li><b>"Innovation in Enterprises, University of Peloponnese"</b><br>Case study and business plan for new Enterprises supporing Information and Telecommunications Technologies.</li>
                                <li><b>LANDSLIDES - EL0071 - "System Development on Monitoring Slope Stability for the Prevention of Landslides and Training of Local Public Authorities in the Region of Peloponnisos"</b><br>Technical leader for the University of Peloponnese during the phase of design and development of Geographic Database, Geographic Information System and Web Geographical Information System using the ArcIMS software package of ArcGIS</li>
                                <li><b>Implementation of Educational Material for the National Center for Public Administration</b><br> Instructional design on the technological themes of the project (Networking / PKI / e-Office / Java / .NET / Web Design), storyboard developer and implementation of the aforementioned topics for Computer Based Training (CBT) and Web Based Training (WBT).</li>
                                <li><b>Development of Network Inventory Management System </b><br>Requirements, Specifications and Implementation of Telecommunication System and Unified Network Inventory Management System for Mobile Communications. Data migration and data synchronization of the new system with all existing legacy Network Management Systems of Vodafone Greece. </li>
                                <li><b>SMS (Simple Mobile Services, IST-034620) </b><br>Definition of the technical requirements and specifications for creating a Simple Mobile Services Platform for Mobile Devices.</li>
                                <li><b>DISCREET (Discreet Service Provision in Smart Environments, IST-27679)</b><br> Definition of the technical requirements and specifications for creating a privacy-aware platform providing services in fixed and mobile networks. </li>
                                <li><b>e-commerce Study</b><br> Requirements and specifications of the database's web interface in an e-commerce system</li>
                                <li><b>SIMPLICITY (Internet-able, Mobile Platforms LeadIng CItizens Towards simplicity, IST-507558)</b><br> Definition of requirements/specifications and implementation of the corresponding integrational functional entities of the Simplicity system.</li>
                                <li><b>International cooperation in industrial research and development activities</b><br> Design and implementation of a LBS service platform for mobile users (2G and 3G) by using XML and RMI technologies between the functional entities of the platform. Also, design and implamentation of the charging/billing system of the platform.</li>
                                <li><b>AQUILA (Adaptive Resource Control of QoS Using an IP-based Layered Architecture, IST-10077)</b><br> Design and implementation of software components for managing IP network in order to provide Quality of Service (QoS). Implementation of the corresponding web application to communicate with the end-user.</li>
                                <li><b>ENAMORADO (Enabling Nomadic Agents in a Multimedia-ORiented Architecture of Distributed Objects, IST-38285)</b><br> Specification of a Mobile-Agent's middleware environment for providing services in heterogeneous devices. Implementation of the mobile mediators used in the dynamic adjustment of telecommunications profile of the end user/device.</li>
                                <li><b>STARLITE (Services, Technologies and Architectures Enabling Internet and PSTN Integration, IST-10684)</b><br> Design and implementation of a Q.931 to OSA/Parlay API wrapper and Upgrade of Siemens HICOM 300 PBX to an OSA/Parlay-enabled PSTN Switch. Implementation of Parlay Generic Call Control API, in HICOM 300 and in Vocaltec's VoIP Gateway, in order to provide homogenized services to PSTN and VoIP networks, by using Java, Distributed Objects Technology (CORBA) and OSA/Parlay APIs. Design and implementation of the following services: "call forwarding", "click2call" and "third party call" demonstrated over PSTN and VoIP networks.</li>
                                <li><b>PENED 99ΕΔ160 (Design and Development of Distributed Service Control Platform by using Mobile Agents and CORBA technologies)</b><br> Design and implemenation of the platform by using Mobile Agents and CORBA, and implementation of the "Interactive Multimedia Retrieval" service of the platform.</li>
                                <li><b>EPET ΙΙ (SS7 compatibility between signaling protocols supported by Siemens EWSD)</b><br> Identification of differences in SCCP-TCAP for different versions of the Protocols supported by Siemens EWSD exchange. Development of a test suite, testing ISUP (ISDN User Part) and INAP (Intelligent Network Application Part) protocols. The corresponding results are enclosed in the Appendix of my thesis.</li>
                                <li><b>REFORM (Resource Failure and Restoration Management in ATM-based Intec Broadband Communication Networks, AC208) </b><br>Drivers' design and implementation, supporting a resource reservation protocol for ATM networks and specific configuration of ATM switches FORE ASX-200, CISCO LS-1010 and Olicom.</li>
                                </ul>";


                            }elseif ($menu == "contact") {

                                echo "<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12656.849096113347!2d22.372358000000002!3d37.5264931!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x136016e7a8e1f80d%3A0xbb156fa1266d8fb4!2zzprOsc-BzrHPis-DzrrOrM66zrcgNzAsIM6kz4HOr8-Azr_Ou863IDIyMSAwMA!5e0!3m2!1sel!2sgr!4v1443176080578" width="550" height="400" frameborder="0" style="border:0;mmargin-top:150px;margin-left:0px;" allowfullscreen align="left"></iframe>";
                               echo "<br>";
                               echo "<b>Contact info</b><br>
                               <hr>
                               Email:[email protected] <br>
                               phone:(+30)2710-372216 | 2710-372160<br>
                               Karaiskaki 70  Tripoli 221 00";
                               echo "<br>";
                                     echo "<img src="tselikas.jpg"> ";

                            }elseif ($menu == "publication") {


                              echo "<p><em style="font-family:Georgia, 'Times New Roman', Times, serif">O Δρ. Nικόλαος Δ. Τσελίκας</em> έχει πάνω από 50 δημοσιεύσεις σε Διεθνή
            Περιοδικά, Συνέδρια, Βιβλία και Κεφάλαια Βιβλίων και το έργο του συγκεντρώνει <?php echo "$sum"; ?> ετεροαναφορές <i>(πηγή:<a href="http://scholar.google.gr/citations?user=vT-WACUAAAAJ&hl=en" target="_blank"> google.scholar</a>)</i>.";

                               echo "<table width="100%">";
                                echo "<tr>";
                                echo "<th bgcolor="#000000" style="color:#fff">Βιβλία</th>";
                                echo "</tr>";
                                  echo "<tr>";
                                echo "<th><b>Β1. Γεώργιος Σ. Τσελίκης, Νικόλαος Δ. Τσελίκας "C: Από τη Θεωρία στην Εφαρμογή",</b><br> Απρίλιος 2010 (αυτοέκδοση), 615 σελίδες, ISBN: 978-960-93-1961-4.</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>Β2. Γεώργιος Σ. Τσελίκης, Νικόλαος Δ. Τσελίκας "C: Από τη Θεωρία στην Εφαρμογή",</b><br> Μάιος 2012 (αυτοέκδοση), 624 σελίδες, ISBN: 978-960-93-1961-4. Περισσότερες πληροφορίες: <a href="www.c4all.gr">www.c4all.gr</a></th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>Β3. George S. Tselikis, Nikolaos D. Tselikas "C: From Theory to Practice",</b><br> Φεβρουάριος 2014 (CRC Press), 518 σελίδες, ISBN-10: 1482214504, ISBN-13: 978-1-4822-1450-5.Περισσότερες πληροφορίες: <a href="https://www.crcpress.com/C-From-Theory-to-Practice/Tselikis-Tselikas/9781482214505">CRC Press - Taylor and Francis Group</a></th>";
                                echo "</tr>";
                                echo "</table>";
                                echo "<br>";
                                echo  "<table style="heigth:100%;">";
                                echo "<tr>";
                                echo "<th bgcolor="#000000" style="color:#fff">Κεφάλαια Βιβλίων</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC1. "Πρωτόκολλα του Στρώματος Εφαρμογής" δεύτερη έκδοση του βιβλίου «Τεχνολογίες Διαδικτύου»,</b><br> Ιάκωβος Στ. Βενιέρης, Ευγενία Νικολούζου, 2006, εκδόσεις Τζιόλα (ISBN 960-418-104-1).</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC2. "Ψηφιακή Γραμμή Συνδρομητή (DSL)" δεύτερη έκδοση του βιβλίου «Δίκτυα Ευρείας Ζώνης»</b><br>,Ιάκωβος Στ. Βενιέρης, 2007, εκδόσεις Τζιόλα (ISBN 960-418-103-3).</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC3. "Ασύρματη Ευρυζωνικότητα" δεύτερη έκδοση του βιβλίου «Δίκτυα Ευρείας Ζώνης»,</b><br>Ιάκωβος Στ. Βενιέρης, 2007, εκδόσεις Τζιόλα (ISBN 960-418-103-3).</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC4. Nikolaos D. Tselikas, Georgia M. Kapitsaki, Dimitrios Makris, Iakovos S. Venieris "Open APIs and Protocols for Services and Applications in Telecoms",</b><br> edited by In Lee, Handbook of Research on Telecommunications Planning and Management for Business (IGI Global), February 2009, ISBN: 978-1-60566-194-0.</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC5. G. N. Prezerakos, N. D. Tselikas and I. S. Venieris "Distributed Intelligent Network",</b><br>The handbook of Technology Management, edited by Hossein Bidgoli, (John Wiley & Sons, Inc), 931 pages, February 2010, ISBN: 978-0-470-24948-2.</th>";
                                echo "</tr>";
                                echo "<tr>";
                                echo "<th><b>ΒC6. G. M. Kapitsaki, G. N. Prezerakos and N. D. Tselikas "Context-aware Web Service Development: Methodologies and Approaches",</b> Enabling Context-Aware Web Services: Methods, Architectures, and Technologies, edited by Dr Michael Sheng, Dr Jian Yu and Prof Dr Schahram Dustdar, CRC Press/Taylor and Francis Group, number of pages: 558, ISBN: 978-1-43980-985-3, May 06, 2010.</th>";
                                echo "</tr>";
                              echo "</table>";
                              echo "<br>";
                              echo "<table>";
                               echo"<tr bgcolor="#000000" ><th style="color:#fff"> Περιοδικά </th><th bgcolor="#000000" style="color:#fff">¨Ετος</th></tr>";
            $jour2=0;
            $string = file_get_contents("./data.json");
            $json = new RecursiveIteratorIterator(
                new RecursiveArrayIterator(json_decode($string, TRUE)),
                RecursiveIteratorIterator::SELF_FIRST);
            foreach ($json as $key => $row1) {
              if(is_array($row1)) {
                 if ($row1['Citation']==0){
                  echo"<td>".$row1['Title']."<br/><b>Ετεροαναφορές: </b> &nbsp;-"."<br/><b>Αυτοαναφορές: </b> &nbsp;-"."</td>";
                 } else {
                   if ($row1['Self_Citation']==0){
                     echo"<td>".$row1['Title']."<br/><b>Ετεροαναφορές:</b> ".$row1['Citation']."<br/><b>Αυτοαναφορές: </b> &nbsp;-"."</td>";
                   } else {
                     echo"<td>".$row1['Title']."<br/><b>Ετεροαναφορές:</b> ".$row1['Citation']."<br/><b>Αυτοαναφορές:</b> ".$row1['Self_Citation']."</td>";
                   }  
                 }
                echo "<td >".$row1['Year']."</td></tr>";
                $jour2 = $jour2 + $row1['Citation'];
              }
            }
            echo "<table>";
            echo"<tr><th  bgcolor="#000000" style="color:#fff"> Συνέδρια </th><th bgcolor="#000000" style="color:#fff">¨Ετος</th></tr></tr>";
            $con=0;
            $string2 = file_get_contents("./data.json");
            $json2 = new RecursiveIteratorIterator(
                new RecursiveArrayIterator(json_decode($string2, TRUE)),
                RecursiveIteratorIterator::SELF_FIRST);
            foreach ($json2 as $key => $row) {
              if(is_array($row)) {
                if ($row['Citation']==0){
                  echo"<td>".$row['Title']."<br/><b>Ετεροαναφορές: </b> &nbsp;-"."<br/><b>Αυτοαναφορές: </b> &nbsp;-"."</td>";
                } else {
                  if ($row['Self_Citation']==0){
                     echo"<td>".$row['Title']."<br/><b>Ετεροαναφορές:</b> ".$row['Citation']."<br/><b>Αυτοαναφορές: </b> &nbsp;-"."</td>";
                   } else {
                     echo"<td>".$row['Title']."<br/><b>Ετεροαναφορές:</b> ".$row['Citation']."<br/><b>Αυτοαναφορές:</b> ".$row['Self_Citation']."</td>";
                   }  
                  }
                  echo "<td >".$row['Year']."</td></tr>";
                  $con = $con + $row['Citation'];
              }
            }echo "</br>";
                                  echo "</table>";


                                  echo "<br><br><br>";

            $sum = $con+$jour2;
            //echo "$sum[i]<br/>"; 

                            }
                                ?>

                            </div>
                             <div style="width:100%;heigth:10%;margin-left:40%;">
                              Copyright © Nikolaos D. Tselikas 2015 
                            </div>
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
                </body>
            </html>

2

Answers


  1. you can do this one sir:

    please add all li like this method code:

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

    And you add this code 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='#00FF00'" onmouseout="this.style.backgroundColor='Gray'">
                                        <a href="indexenactive.php?menu=research">
                                            <span class="ca-icon">L</span>
                                            <div class="ca-content">
                                                <h2 class="ca-main">Research</h2>
                                                <h3 class="ca-sub"></h3>
                                            </div>
                                        </a>
                                    </li>
                                    <li onmouseover="this.style.backgroundColor='#FFFF00'" onmouseout="this.style.backgroundColor='orange'">
                                        <a href="indexenactive.php?menu=teaching">
                                            <span class="ca-icon" id="heart">U</span>
                                            <div class="ca-content">
                                                <h2 class="ca-main">Teaching </h2>
                                                <h3 class="ca-sub"></h3>
                                            </div>
                                        </a>
                                    </li>
                                    <li onmouseover="this.style.backgroundColor='#FF00FF'" onmouseout="this.style.backgroundColor='#00FF00'">
                                        <a href="indexenactive.php?menu=publication">
                                            <span class="ca-icon">a</span>
                                            <div class="ca-content">
                                                <h2 class="ca-main">Publications</h2>
                                                <h3 class="ca-sub"></h3>
                                            </div>
                                        </a>
                                    </li>
                                    <li onmouseover="this.style.backgroundColor='#C0C0C0'" onmouseout="this.style.backgroundColor='#00FFFF'">
                                        <a href="indexenactive.php?menu=projects">
                                            <span class="ca-icon">`</span>
                                            <div class="ca-content">
                                                <h2 class="ca-main">Projects</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>
    

    DEMO FIDDLE

    Login or Signup to reply.
  2. $('.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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search