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

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

私はこの方法を、すべての法律を持つメニューを作成する方法について説明するチュートリアルを作成することを決めた前回のチュートリアル 、あなたの持って任意のPHPのページに、さらに任意のCMS用に特に有名なワードプレスに使用することができますに基づく。

デモを見る

道具

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

2 - 画像がホバープロパティで使用する。

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

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">"！ - [ スタート ] メニュー- "<li> <a クラス = "index" のhref = "index.php">ホーム"/""/李"<li>" クラス ="の"href ="enviar.php"電子メール"を送る"/""/李"<li> <a クラス = "contact" のhref = "contacto.php">お問い合わせ"/""/李""リー "= "resources" href =の <a クラス "recursos.php">資源 "/""/李 ""/ UL 規格""！ -エンドメニューを隠す- "

今、我々はタグに idを追加<ul>（最初の行）、それから各タグにクラスを追加するの<a>、それぞれのリンク（別1）ので、1つのインデックス、1つの電子メール、いずれかに連絡し、必要があります1つのリソース。

それは私たちのメニューは、htmlの構造は、index.phpとして、ページを保存しているのに十分だとスタイルで進みます。

スタイルを追加する

我々は新しいページをCSSのオープンしました。

css-menu

のstyle.cssとして保存すると、PHPのページへのスタイルへのリンクに返される。

我々はどのように、videotutorialで説明する方法を最初からワードプレスのテーマにするために、要素を"*"を、すべての要素には、そのため、各プロパティには、アスタリスクを追加するさまざまな機能を追加するために使用されると、される私達の方法を開始すべての要素を私達のページに存在するが撮影しただけで追加してみましょうマージンとパディング： 

  1
 2
 3
 4

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

我々は、体で、我々のページには、次の背景画像の場所を続行美的ている：

など我々のCSSでの本体です： 

  1
 2
 3
 4
 5

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

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

  1
 2
 3
 4

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

唯一我々ubircarloの額面（ライン3）bgのためのリスト（2行目）と上限の範囲内の各項目の冒頭にポイントを取る。

我々は、要素の"李"と、我々だけのプロパティ"の表示が追加されます：インライン"に、互いに隣接して続けている。 

  1
 2
 3

  ＃メニューの李（
 inline ; 表示： インライン;
 ）

今では""、それは次のプロパティを予定アイテムを編集する時間です。 

  1
 2
 3
 4
 5
 6
 7
 8

  ＃メニューの李（
 block ; 表示： ブロック;
 60px ; 幅：60px;
 102px ; 高さ：102px;
 left ; フロート：左;
 -5000px ; テキストのインデント：- 5000px;
 2px ; 余白左：2px;
 ）

幅と、各画像の高さ（ライン3と4のそれぞれ）、このプロパティはfloat型：他のテキストの右インデントを設定上の1つに位置するため、そのタグの内側にされているテキストの<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 ; } ＃メニューの李1つの 。 指数 （背景：（背景 ：（画像 / enviar.png） は、繰り返し;）＃ メニュー のURLの李1つの 。 連絡先 （画像 / home.png） は、繰り返し;）＃ メニューの李1つの 。 投稿のURL （背景 ：（画像 / contacto.png） は、繰り返し;）＃ メニューの李1つの 。 資源 （背景 ：（画像 / recursos.png） は、繰り返し;）のURLのURL

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

続行：各イメージをホバーの変更約するときにそれらの上にマウス。 

  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 ; } ＃メニューの李1つの 。 指数：李1つの 。 メール （画像 / ホームhover.png） は、繰り返し;）＃ メニュー （背景：URLの ホバー ：（背景：URLの ホバー （画像 / ポストhover.png） は、繰り返し ;）＃メニューの李1つの 。 連絡先 ：（画像 / 非接触hover.png） は、繰り返し;）李1つの 。 資源 ：（画像/（ 背景：URLの ホバー ＃メニュー （背景：URLの ホバー 資源hover.png） いいえ-繰り返します;）

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

とどのように遠くまで行って画像の上にマウスを渡す際のオプションが利用可能になるが行われている。 これはPHPがゲームに入ると、我々を行うので、ここで我々ですか、我々は、単に身体にIDを追加することによって行うメニューのセクションでマークされます。

例えば： 

  1

  "enviar" > <Body = IDを "post">

ときは、各ページは、このCSSの以下の次のステップへのジャンプの体から別のidには、このようなあなたの体を何か残っている追加のワードプレスでは、このメニューや他のCMSを使用していない場合：

ファイル：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

 = $_SERVER [ 'REQUEST_URI' ] ; $pagina = str_replace ( "/" , "" , $pagina ) ; $pagina = str_replace ( ".php" , "" , $pagina ) ; $pagina = str_replace ( "?s=" , "" , $pagina ) ; $pagina = $pagina ? $pagina : 'default' ?> "？PHPは $ページ = $ _SERVER ['REQUEST_URI']に、$ ページ = str_replace（"/"、""、$ページ）$ ページ = str_replace（"php"を、""、$ ページ）$ のページ = str_replace（"？="、""、$ページ）$ ページ = $ページ：$ のページ ：'default'は？"掲載

私のそれぞれの行を説明します：

1 - PHPコードを公開

2 -これで我々 （つまり、WordPressのURLを覚えているURLを持参のようなもの"に多く使用されるhttp://www.tublog/tu-pagina/"）。

3 -ここで、"任意のスラッシュを移動する/"、何かに置き換えられます！ ""。

4 - どこかに移動します。"php"を、何かに置き換えられます！。

5 - どこで？業S ="、何かに置き換えられる任意行く！。

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

7 - 閉じるPHPタグ。

だから何をしたらいいのurlに乗り、我々のidのためにサービスを提供しないこれらすべてのものを削除します。

今聞かせ私たちの身体、私たちは、以下を追加します： 

  1

  "<?php echo $pagina ?>" > "ボディ番号=""？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 ; }ボディ＃インデックス＃メニューの李1つの 。 指数 （背景：（） は、繰り返し 画像 / ホームhover.png のURL;）ボディ＃メール＃メニューの李1つの 。 ポスト （背景： の URL（画像 / ポストhover.png） いいえ-繰り返します;）ボディ＃連絡李＃ メニュー 連絡先 （背景：（） は、繰り返し 画像 / 非接触hover.png のURL;）ボディ＃リソース＃メニューの李1つの 。 資源 （背景 ：（画像 / URL リソース-ホバー。PNG形式） は、繰り返し;）

通常、それが何を言うのは、ときに、身体の"クラス"は、ホバーのイメージを確認する1つこれらのIDを（インデックス、電子メール、連絡先、リソース）のものです。

利口な！ したがって、我々、CMSや他のページとWordpressのために当社のメニューを完了しているが。php、ここで私は下にジッパーを残しは、すべての最終的なファイルです。

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

マイケルは、作成者とは、ガイドとワードプレスCuteNewsは、PHP、HTML、および詳細については、チュートリアルを発行エディタskyandstars.netです。 Acutalmente大学生。

Mijael166

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

CMSへの3つの状態を持つメニュー"の7つのコメント"

  1. アイサ

    2009年4月27日

    答え

    私は少し混乱は、私のように私のメニューを参照しているとDreamweaverとは確かに簡単です：S通常

    移動して、チュートリアルのレベルのマイケルが発生しています！ おめでとう：）

  2. マイケル

    2009年4月28日

    答え

    Jajajaシ...基本的には...しかし、彼らを強調したかったの効果の写真を変更されているページで、これら.... Dificl HACR定のワードプレスのマークがされているが... ...そしてPHPのentoncsですすべてのページに同じヘッダーの作品ですこの...キスのISA =）いない

  3. アイサ

    2009年4月29日

    答え

    グァンアムフェア！ 私は何時に別のページで、なぜ、鼻を刺した強調表示されません見たのは初めて風。 今、もし私は違う、それを参照して私は時々ワット思ったが、実際にそれがもし私がこれを、チュートリアルのような他の法令の一覧については、私がやりたいので、私のサイトが提供できますか？

  4. マイケル

    2009年4月30日

    答え

    もちろん：Pはスタイルから体内にIDを追加するにはそれをする必要があります：）...または、もし、自動的に本体を置きたいと思う、phpのではない... ...だが、いい.. お好みに合わせ...ウンBesoをすることです！

  5. アイサ

    2009年4月30日

    答え

    [OK]を！ jeje

  6. graciebird

    2009年4月30日

    答え

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

  7. フラン

    2009年6月22日

    答え

    モノブエンtuto、非常に便利な、非常によく説明し、最終的なファイルです。 本当に感謝です

コメントを残す

名前（必須）

Eメール（ただし必須公開されません）

ウェブ

コメント（必須）

*あなたの電子メールアカウントにグラバターの上に関連付けるために使用されて