Recreate menu.php in css only

This commit is contained in:
Aurelien Labate 2019-12-27 12:14:37 +01:00
parent 3122475e90
commit ca26850108
13 changed files with 62 additions and 191 deletions

View File

@ -8,7 +8,6 @@ require_once('includes/config.php');
<link rel="stylesheet" type="text/css" href="assets/css/aide.css" />
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/menus.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/theme/favicon_ie.ico">
<title>Festiv'Algo - A propos</title>
<meta name="keywords" content="festivalgo, Festiv'Algo, algobox, site, application gratuite, nitrosax, algorithme, algorithmique, programmation, Casio, TI, HP, apprendre, bac, mathématiques, ROC, nouveaux programmes, réformes" />

View File

@ -11,7 +11,6 @@ require_once('includes/config.php');
<script type="text/javascript" src="assets/js/compil1.js"></script>
<script type="text/javascript" src="assets/js/compil2.js"></script>
<script type="text/javascript" src="assets/js/execution.js"></script>
<script type="text/javascript" src="assets/js/menus.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/theme/favicon_ie.ico">
<title>Festiv'Algo - Aide pour la programmation d'algorithmes. Tutoriel d'algorithmique, TI Basic et Basic Casio.</title>
<meta name="keywords" content="festivalgo, algobox, tutoriel, aide, algorithme, algorithmique, programmation, Casio, TI, HP, apprendre, bac, mathématiques, ROC, nouveaux programmes, réformes" />

View File

@ -1,19 +0,0 @@
#Ecriture_onglet1
{
bottom: 75px;
}
#Ecriture_onglet2
{
bottom: 122px;
}
#Ecriture_onglet3
{
bottom: 170px;
}
#Ecriture_onglet4
{
bottom: 217px;
}

View File

@ -1,96 +0,0 @@
@font-face {
font-family: 'Navig';
src: url('../fonts/Action_Man/Action_Man-webfont.eot');
src: url('../fonts/Action_Man/Action_Man-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Action_Man/Action_Man-webfont.woff') format('woff'),
url('../fonts/Action_Man/Action_Man-webfont.ttf') format('truetype'),
url('../fonts/Action_Man/Action_Man-webfont.svg#ActionManRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#menus
{
text-align: center;
}
#banniere
{
margin-top: 45px;
height: 155px;
}
#navigation
{
margin-top: 15px;
margin-bottom: 40px;
height: 35px;
}
.onglet
{
position: absolute;
top: 216px;
z-index: 1;
}
#onglet1
{
left: 65px;
}
#onglet2
{
left: 215px;
}
#onglet3
{
left: 365px;
}
#onglet4
{
left: 515px;
}
#onglet5
{
left: 665px;
}
.Ecriture_onglet
{
max-width: 200px;
font-family: Navig, Arial;
font-size: 20px;
text-align: left;
position: absolute;
z-index: 2;
top: 196px;
}
#Ecriture_onglet1
{
left: 72px;
}
#Ecriture_onglet2
{
left: 247px;
}
#Ecriture_onglet3
{
left: 410px;
}
#Ecriture_onglet4
{
left: 569px;
}
#Ecriture_onglet5
{
left: 699px;
}

View File

@ -736,4 +736,54 @@ footer
#ins
{
color: red;
}
/**********************
* includes/menu.php
**********************/
#banner
{
text-align:center;
margin: 45px 0 16px 0;
}
@font-face {
font-family: 'Action Man';
src: url('../fonts/Action_Man/Action_Man-webfont.eot');
src: url('../fonts/Action_Man/Action_Man-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Action_Man/Action_Man-webfont.woff') format('woff'),
url('../fonts/Action_Man/Action_Man-webfont.ttf') format('truetype'),
url('../fonts/Action_Man/Action_Man-webfont.svg#ActionManRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#menu
{
width: 900px;
margin: auto;
height: 30px;
border-radius: 10px;
background: rgb(255,190,62);
background: linear-gradient(180deg, rgba(255,190,62,1) 0%, rgba(255,122,49,1) 100%);
display: flex;
flex-direction: row;
text-align: center;
}
#menu a
{
font-family: 'Action Man', Arial;
flex-grow: 1;
padding-top: 5px;
line-height: 25px;
margin: 0 16px 0px 16px;
font-size: 1.2em;
}
#menu a:hover
{
background: rgb(238,0,33);
background: linear-gradient(167deg, rgba(238,0,33,1) 0%, rgba(177,24,40,1) 100%);
}

View File

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,48 +0,0 @@
$(document).ready(function() {
function hide_onglet() {
$('nav').append("<img class='onglet' id='onglet1' src='assets/img/theme/onglet.png'/><img class='onglet' id='onglet2' src='assets/img/theme/onglet.png'/><img class='onglet' id='onglet3' src='assets/img/theme/onglet.png'/><img class='onglet' id='onglet4' src='assets/img/theme/onglet.png'/><img class='onglet' id='onglet5' src='assets/img/theme/onglet.png'/>");
$('#onglet1').hide();
$('#onglet2').hide();
$('#onglet3').hide();
$('#onglet4').hide();
$('#onglet5').hide();
}
function colore_onglet()
{
$('#Ecriture_onglet1').mouseenter(function() {
$('#onglet1').show();
});
$('#Ecriture_onglet1').mouseleave(function() {
$('#onglet1').hide();
});
$('#Ecriture_onglet2').mouseenter(function() {
$('#onglet2').show();
});
$('#Ecriture_onglet2').mouseleave(function() {
$('#onglet2').hide();
});
$('#Ecriture_onglet3').mouseenter(function() {
$('#onglet3').show();
});
$('#Ecriture_onglet3').mouseleave(function() {
$('#onglet3').hide();
});
$('#Ecriture_onglet4').mouseenter(function() {
$('#onglet4').show();
});
$('#Ecriture_onglet4').mouseleave(function() {
$('#onglet4').hide();
});
$('#Ecriture_onglet5').mouseenter(function() {
$('#onglet5').show();
});
$('#Ecriture_onglet5').mouseleave(function() {
$('#onglet5').hide();
});
}
hide_onglet();
colore_onglet();
});

View File

@ -1,3 +0,0 @@
$(document).ready(function() {
$('.Ecriture_onglet').css('top', '204px');
})

View File

@ -131,7 +131,6 @@ L\'aire du quart de disque est Pi/4 et la fréquence d\'apparition du point dans
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="assets/css/exemples.css" />
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/menus.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/theme/favicon_ie.ico">
<title>Festiv'Algo - Exemples d'algorithmes</title>
<meta name="keywords" content="festivalgo, algobox, exemples, algorithme, algorithmique, programmation, Casio, TI, HP, tester des algorithmes, bac, mathématiques, ROC, nouveaux programmes, réformes" />

View File

@ -1,21 +1,12 @@
<span id="menus">
<header>
<link rel="stylesheet" type="text/css" href="assets/css/menu.css" />
<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/iPhone/i',$agent) || preg_match('/Mac/i',$agent) || preg_match('/Linux/i',$agent))
echo '<script type="text/javascript" src="assets/js/safari.js"></script>';
?>
<p id="banniere"><img alt="Bannière Festiv'Algo" title="Festiv'Algo - l'algorithmique enfin accessible à tous !" src="assets/img/theme/banniere.png"/></p>
</header>
<nav>
<p id="navigation"><img src="assets/img/theme/navigation.png"/></p>
<h1><a href="<?= $base_url ?>"><p class="Ecriture_onglet" id="Ecriture_onglet1">Programmation</p></a></h1>
<h1><a href="exemples.php"><p class="Ecriture_onglet" id="Ecriture_onglet2">Exemples</p></a></h1>
<h1><a href="aide.php#top"><p class="Ecriture_onglet" id="Ecriture_onglet3">Aide</p></a></h1>
<h1><a href="a_propos.php"><p class="Ecriture_onglet" id="Ecriture_onglet4">A propos</p></a></h1>
</nav>
<span/>
<header id="banner">
<a href="<?= $base_url ?>">
<img alt="Bannière Festiv'Algo" title="Festiv'Algo - l'algorithmique enfin accessible à tous !" src="assets/img/theme/banner.png"/>
</a>
</header>
<nav id="menu">
<a href="<?= $base_url ?>">Programmation</a>
<a href="exemples.php">Exemples</a>
<a href="aide.php#top">Aide</a>
<a href="a_propos.php">À propos</a>
</nav>

View File

@ -18,7 +18,6 @@
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery/jquery.cleditor.js"></script>
<script type="text/javascript" src="assets/js/menus.js"></script>
<script type="text/javascript" src="assets/js/interface.js"></script>
<script type="text/javascript" src="assets/js/compil1.js"></script>
<script type="text/javascript" src="assets/js/compil2.js"></script>