メニューCMSへの3つの状態で

メニューCMSへの3つの状態で

に基づいて、以前のチュートリアル、私は法律とのすべてのメニューを決定するために説明する方法へのチュートリアルを作成するこの場合は、ワードプレスの有名なPHPのそれを任意のことができます使用するページでは、さらにして、任意の、とりわけCMS。

デモを見る

ツール

1 - 各セクションカットメニューのイメージ。

2 - 画像はホバープロパティで使用されます。

3 - のHTML（例えばDreamweaver用プログラム）。

4 - いくつかの知識：CSSを、HTMLおよびPHP。

HTMLの構造

まず我々は新しいPHPページを開き、我々が順序付きリストを作成する我々のメニューのHTMLの構造を作る必要があるの： 

  1
 2
 3
 4
 5
 6

 "menu" > <!--Comienza Menu--> < li >< a class = "index" href = "index.php" > Home < / a >< / li > < li >< a class = "enviar" href = "enviar.php" > Enviar < / a >< / li > < li >< a class = "contacto" href = "contacto.php" > Contacto < / a >< / li > < li >< a class = "recursos" href = "recursos.php" > Recursos < / a >< / li > < / ul > <!--Termina Menu--> <ul ID は = "menu"> <！ - [スタート]メニュー- クラス = "index" の href> の<li>の<a = "index.php">ホーム</ 1> <を/ 李> <LI>に<クラス を ="=提出 のhref""enviar.php は" のhref /> </李 > <LI>に<a クラス = "contact" の>次に送信 <= "contacto.php"> お問い合わせ </> </ 李> <李 >の<a クラス = "resources" の href = "recursos.php">資源</ 1> <を/ 李> </ UL規格> <！ -エンドメニュー- >

行）し、我々に（の<a> addレベルの違いをすべてのラベルの異なる1のcontact、each link）soインデックスを、have weはwill email最初Now（<ul>の、我々が追加idにタグリソース。

それはindex.phpとしてページを保存し、スタイルと一緒のメニューのhtml構造を持っているだけで十分です。

スタイルを追加する

新しいページのCSSを開きます。

css-menu

我々は、style.cssのようにそれを維持し、PHPの返されるページスタイルにリンクします。

われわれは、それはなるようにからスタートしましたアスタリスクを、* を"にワードプレスとして確認する方法のビデオチュートリアルで説明テーマ機能を別の追加に使用さから、最初のすべての要素、各追加プロパティを使用するに"elementすべての要素を私たちのサイトに存在する撮影、私たちはマージンとパディングを追加します： 

  1
 2
 3
 4

 : 0 ; padding : 0 ; } *（マージン：0;パディング：0;）

私たちは体で、我々のウェブサイトは、次の背景画像を配置する継続美的もです：

など私たちのCSSの体は： 

  1
 2
 3
 4
 5

  本体 （
 url ( imagenes/bg.png ) repeat-x #333333 ; 背景： の URL（画像は/）bg.png 繰り返しに- x＃333333;
 12px ; フォントサイズ：12px;
 Arial , Helvetica , sans-serif ; フォントファミリー：MS Pゴシック、Helveticaの、 サンセリフ;
 ）

さて、もし私たちが"我々を開始するスタイルを与えるメニューの最初に、"すべてのIDをメニュー 

  1
 2
 3
 4

  ＃メニュー （
 none ; リストスタイル： なし。
 15px ; マージントップ：15 pxの。
 ）

彼はただのリスト（2行目）とペアubircarloのbgの（ライン3）の上限の範囲内の各項目の冒頭にポイントを脱いだ。

我々は、他の各横に継続を持つ要素を" 李位置"は"に、 我 々はのみインライン：表示"を追加プロパティを。 

  1
 2
 3

  ＃メニューの リチウム （
 inline ; 表示： インライン。
 ）

今では編集するアイテム"1"時間の、それは次のプロパティがかかります。 

  1
 2
 3
 4
 5
 6
 7
 8

 display : block ; width : 60px ; height : 102px ; float : left ; text-indent : -5000px ; margin-left : 2px ; } ＃は、メニューのLi 1（表示： ブロック、 幅：60px;高さ：102px;フロート：左、 テキストインデント：- 5000px; margin - leftや：2px;）

幅と）それぞれの高さはそれぞれの画像（3行目と4、プロパティは、float： 左と<a>ラベル内の右側にすることにあるいずれかのテキストをを削除、他のテキストのインデント左マージンはビットごとに、他のメニューを分離する。

今はラベルごとに使用されるクラス ""。 ので、我々が残っている。 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 { background : url ( imagenes/home.png ) no-repeat ; } #menu li a .enviar { background : url ( imagenes/enviar.png ) no-repeat ; } #menu li a .contacto { background : url ( imagenes/contacto.png ) no-repeat ; } #menu li a .recursos { background : url ( imagenes/recursos.png ) no-repeat ; } ＃メニュー李Åのインデックス（背景： の URL（画像 / home.png） はリピート;）＃ メニュー李Åの送信 （背景： の URL（画像 / enviar.png） はリピート;）＃ メニュー李A.コンタクト （背景： の URL（画像 / contacto.png） はリピート;）＃ メニュー李Åのリソース （背景： の URL（画像 / recursos.png） ノー繰り返し;）

単に各要素に背景を追加します。

caの変化に各画像の：ホバーを続行するときに、マウス。 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 :hover { background : url ( imagenes/home-hover.png ) no-repeat ; } #menu li a .enviar :hover { background : url ( imagenes/enviar-hover.png ) no-repeat ; } #menu li a .contacto :hover { background : url ( imagenes/contacto-hover.png ) no-repeat ; } #menu li a .recursos :hover { background : url ( imagenes/recursos-hover.png ) no-repeat ; } ＃メニュー李Åの索引： ホバー （背景： の URL（画像 / ホームhover.png） は、繰り返し;）＃ メニュー李Åの送信： ホバー （背景： の URL（画像 / 投稿- hover.png） は、繰り返し ;）＃メニュー李A. コンタクト： ホバー （背景： の URL（画像 / 非接触hover.png） は、繰り返し;）＃ メニュー李Åの資源： ホバー （背景： の URL（画像 / 資源hover.png） いいえリピート;）

準備は、単に各要素の末尾に"ホバー"を追加し、それぞれのイメージを変更します。

とこれまでのところだけで使用可能なイメージの上にマウスを渡すオプションを持つことになる行われているもの。 これは、私たちは、それが我々はメニューのセクションをマークしないようにPHPで遊びに出たとき、何ですか、我々はこれだけで体にIDを追加することによって行う。

例： 

  1

  "enviar" > <body idは = "post">

あなたはワードプレスやany他のCMSで、このメニュー使用しない場合だけで、あなたはこのようにあなたの体をだろうeach pageとCSSの次のステップにjumpの異なるbodyをadd会員番号：

ファイル：index.phpを

本文： 

  1

  "index" > <body idは = "index">

ファイル：enviar.phpを

本文： 

  1

  "enviar" > <body idは = "post">

ファイル：contacto.phpを

本文： 

  1

  "contacto" > <body idは = "contact">

ファイル：recursos.phpを

本文： 

  1
 2

  ]
 "recursos" > <body idは = "resources">

私が前に、これを手動で行う場合のCSSを見つける述べたように、このチュートリアルでは、以下のこの新しいセクション。

あなたがワードプレスでこのメニューを使用している場合は、我々は問題があるでしょう、どのように我々はそれぞれの体に異なる場合メニューが1つのと呼ばれるファイルのidを追加する"header.phpを"とは、同じヘッダーがファイルとして、すなわちやホームページの連絡先に送信するし、我々は、次のPHPコードを追加します。 私達のページ。

<body>の我々は次のように書く前に： 

  1
 2
 3
 4
 5
 6
 7

  <？PHPの
 $_SERVER [ 'REQUEST_URI' ] ; $ページ = $ _SERVER ['REQUEST_URIが'];
 str_replace ( "/" , "" , $pagina ) ; $ページ = のstr_replace ("/",""、$ページ）;
 str_replace ( ".php" , "" , $pagina ) ; $ページ = str_replaceの （"。PHPの"、""、$ ページ）;
 str_replace ( "?s=" , "" , $pagina ) ; $ページ = str_replaceの （"？のS ="、""、$ ページ）;
 $pagina ? $pagina : 'default' $ページ = $ページ？$ ページ：'default' が
 ？>

私が説明するそれぞれの行：

1 - PHPコードを開きます。

2 - "何かのように持ってURLをでさらに我々が使用されます（URLをワードプレスのことを覚えてhttp://www.tublog/tu-pagina/）。

3 -どこスラッシュを残して"/"何かに置き換えられます！ "。"

4 - どこかに行く。"PHP"を、何に置き換えられます！

5 - どこですか？のS ="、何に置き換えられますいずれかを行く！

6 - それは結果を返します。

7 - 閉じるphpのタグです。

それでは、私たちはURLを取ると私たちのidのための私達を提供しないすべてのものを削除します。

今では私たちの体に移動し、我々が追加されます： 

  1

  "<?php echo $pagina ?>" > <ボディは> IDを="<？>？PHPのエコーが$ ページ

レディ！ 体は私たちがしているページのIDがかかります。

我々は、今まで私たちのIDを本体にスタイルを追加ください。

次のように追加します。 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 { background : url ( imagenes/home-hover.png ) no-repeat ; } body #enviar #menu li a .enviar { background : url ( imagenes/enviar-hover.png ) no-repeat ; } body #contacto #menu li a .contacto { background : url ( imagenes/contacto-hover.png ) no-repeat ; } body #recursos #menu li a .recursos { background : url ( imagenes/recursos-hover.png ) no-repeat ; }体＃インデックス＃メニュー李Åのインデックスは（背景： の URL（画像 / ホームhover.png） はリピート;）ボディ＃メール＃メニュー李a. 背景を 提出 （： の URL（画像 / 投稿- hover.png）を いいえリピート;）ボディ＃お問い合わせ＃メニュー李A.コンタクト （背景： の URL（画像 / 非接触hover.png） は、繰り返し;）＃本体＃メニューのリチウムリソース。リソース （ 背景：のURL（ 画像は/資源ホバー。png）の ノー繰り返し;）

準備は、それが何を教えてくれるなことは、体が、これらの（インデックスは、連絡先、リソースを送信する）idのあるとき"クラス"ホバーのイメージを取得することです。

レディ！ 我々は両方のワードプレスのメニューを終えたとしてCMSや他のページ。phpを、下はここをどこでzipファイルは、すべての最終的なものにします。

ダウンロードチュートリアルこここの結果

マイケルは作成者とガイドとワードプレス、CuteNewsは、PHPは、HTMLおよび多くのためのチュートリアルを公開skyandstars.netのエディタです。 現在の大学の学生です。

Mijael166

たぶん、1つこれらのエントリの興味があります

CMSへの3つの状態でメニュー"に7つの応答

  1. アイザ

    2009年4月27日

    応答

    私は少し混乱して、私は、Dreamweaverの場合と同様、私のメニューを見ると、確かに簡単に利用しています：Sを

    Goは、チュートリアルマイケルのレベルを調達している！ 私はあなたを祝福：）

  2. マイケル

    2009年4月28日

    応答

    ハハえは...基本的に..しかし、彼は強調したかったの効果を写真を変えているページがdificlワードHACRこれらの....で強調表示さはPHPの...ためにため、すべてのページの動作と同じヘッダーが... entoncsですこれは...キスisaはありません=）

  3. アイザ

    2009年4月29日

    応答

    AHMは行く！ 初めて風の私が何かを別のページでクリックしたときに、なぜ鼻ハイライトを残していない見た。 私は違う、実際に私はそれが希望、うんうんあるワット疑問がそれを見れば今、このチュートリアルでは私のような、法令のリスト私がしなければならないため、別の1つは、自分のサイトが権利を提供することができますので、？

  4. マイケル

    2009年4月30日

    応答

    Pは単にIDから、それをしなければならないもちろん：本体にスタイルを追加：）...または、もし自動的に本体を置くしたいPHPでそれを行うには...、よく.. お好みの...ウンベソです！

  5. アイザ

    2009年4月30日

    応答

    [OK]を！ 笑

  6. graciebird

    2009年4月30日

    応答

    非常に良いtutoは次回のバージョンを変更するには使用されます。 ありがとうございます。 もちろん、絶望の多くのフォーラムにメッセージを残して、希望は私を助けることができます。 ウェブサイトは私とても役立ってスルー。

  7. フラン

    2009年6月22日

    応答

    良いtuto、非常に便利な、非常によく説明し、最終的なファイルです。 本当に感謝しています

コメントを残す

名前（必須）

電子メールは、（必須では公開されません）

ウェブ

コメント（必須）

*あなたの電子メールがでアカウントをにする場合に使用関係グラバター